javascript - content - 如何使用jQuery替換div的innerHTML?




jquery text value (8)

jQuery的.html()可用於設置和獲取匹配的非空元素( innerHTML )的內容。

var contents = $(element).html();
$(element).html("insert content into element");

我怎麼能實現以下內容:

document.all.regTitle.innerHTML = 'Hello World';

使用jQuery其中regTitle是我的div ID?


html()函數可以採用HTML字符串,並且會有效地修改.innerHTML屬性。

$('#regTitle').html('Hello World');

但是, text()函數將更改指定元素的(文本)值,但保留html結構。

$('#regTitle').text('Hello world'); 

你可以在jQuery中使用html或text函數來實現它

$("#regTitle").html("hello world");

要么

$("#regTitle").text("hello world");

只需添加一些性能見解。

幾年前,我有一個項目,我們在嘗試將大型HTML /文本設置為各種HTML元素時遇到了問題。

看來,“重新創建”元素並將其註入到DOM中的速度要快於任何建議的更新DOM內容的方法。

所以像這樣:

var text = "very big content";
$("#regTitle").remove();
$("<div id='regTitle'>" + text + "</div>").appendTo("body");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

應該讓你有更好的表現。 我最近沒有嘗試過衡量(瀏覽器最近應該很聰明),但是如果你正在尋找性能,它可能會有所幫助。

缺點是您將有更多的工作來保持DOM和腳本中的引用指向正確的對象。


已經有了解如何更改元素的內部HTML的答案。

但我會建議,你應該使用一些像淡出/淡入的動畫來改變HTML,它可以改變HTML的效果,而不會立即改變內部的HTML。

使用動畫來更改內部HTML

$('#regTitle').fadeOut(500, function() {
    $(this).html('Hello World!').fadeIn(500);
});

如果你有很多需要它的功能,那麼你可以調用改變內部Html的通用函數。

function changeInnerHtml(elementPath, newText){
    $(elementPath).fadeOut(500, function() {
        $(this).html(newText).fadeIn(500);
    });
}

這是你的答案:

//This is the setter of the innerHTML property in jQuery
$('#regTitle').html('Hello World');

//This is the getter of the innerHTML property in jQuery
var helloWorld = $('#regTitle').html();

$("#regTitle")[0].innerHTML = 'Hello World';

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      $( document ).ready(function() {
        $('.msg').html('hello world');
      });
    </script>

  </head>
  <body>
    <div class="msg"></div>
  </body>
</html>






innerhtml