【问题标题】：How to replace innerHTML of a div using jQuery?如何使用 jQuery 替换 div 的 innerHTML？
【发布时间】：2010-11-21 12:30:13
【问题描述】：

我怎样才能实现以下目标：

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

使用 jQuery，其中 regTitle 是我的 div id？

【问题讨论】：

标签： javascript jquery innerhtml

【解决方案1】：

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

【讨论】：

【解决方案2】：

html() 函数可以接受 HTML 字符串，并且会有效地修改 .innerHTML 属性。

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

但是，text() 函数会更改指定元素的（文本）值，但保留html 结构。

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

【讨论】：

" 但保留 html 结构" 。你能解释一下吗？
来自 jQuery API 文档 (api.jquery.com/text)，text() 不同于：Unlike the .html() method, .text() can be used in both XML and HTML documents.。此外，根据stackoverflow.com/questions/1910794/…，jQuery.html() treats the string as HTML, jQuery.text() treats the content as text。
@AnoopJoshi stackoverflow.com/questions/1910794/…

【解决方案3】：

如果您想要渲染一个 jQuery 对象而不是现有内容：那么只需重置内容并附加新内容。

var itemtoReplaceContentOf = $('#regTitle');
itemtoReplaceContentOf.html('');
newcontent.appendTo(itemtoReplaceContentOf);

或者：

$('#regTitle').empty().append(newcontent);

【讨论】：

使用的好地方itemtoReplaceContentOf.empty();
newcontent 是 jQuery 对象吗？这不清楚。
@kmoser 在第一个示例中，newcontent 确实是一个 jquery 对象。在第二个示例中，它可以是 htmlString 或 Element 或 Text 或 Array 或 jQuery 类型，根据 api.jquery.com/append

【解决方案4】：

这是你的答案：

//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();

【讨论】：

【解决方案5】：

答案：

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

说明：

$ 等价于jQuery。两者都代表 jQuery 库中的同一个对象。括号内的"#regTitle" 称为选择器，jQuery 库使用它来识别要应用代码的html DOM（文档对象模型）的哪些元素。 regTitle 之前的 # 告诉 jQuery regTitle 是 DOM 内元素的 id。

从那里，点符号用于调用 html 函数，该函数将内部 html 替换为您放置在括号之间的任何参数，在本例中为 'Hello World'。

【讨论】：

【解决方案6】：

已经有一些答案给出了如何更改元素的内部 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);
    });
}

【讨论】：

【解决方案7】：

jQuery 的.html() 可用于设置和获取匹配的非空元素（innerHTML）的内容。

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

【讨论】：

html后面的开闭括号救了我。所以记住这两个人很重要。

【解决方案8】：

你可以在jquery中使用html或text函数来实现它

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

或

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

【讨论】：

【解决方案9】：

示例

$( document ).ready(function() {
  $('.msg').html('hello world');
});

    <!DOCTYPE html>
    <html>
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    
      </head>
      <body>
        <div class="msg"></div>
      </body>
    </html>

【讨论】：

【解决方案10】：

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

【讨论】：

【解决方案11】：

只是为了添加一些性能见解。

几年前，我有一个项目，尝试将大型 HTML/文本设置为各种 HTML 元素时遇到了问题。

看来，“重新创建”元素并将其注入 DOM 比任何更新 DOM 内容的建议方法都要快。

比如：

var text = "very big content";
$("#regTitle").remove();
$("<div id='regTitle'>" + text + "</div>").appendTo("body");

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

应该让你有更好的表现。我最近没有尝试衡量这一点（这些天浏览器应该很聪明），但如果您正在寻找性能，它可能会有所帮助。

缺点是你需要做更多的工作来保持 DOM 和脚本中的引用指向正确的对象。

【讨论】：

【解决方案12】：

jQuery 很少有处理文本的函数，如果你使用 text() 一个，它会为你完成这项工作：

$("#regTitle").text("Hello World");

此外，如果您有任何 html 标记...

，您可以改用html()

【讨论】：

【解决方案13】：

纯 JS 和最短

纯 JS

regTitle.innerHTML = 'Hello World'

regTitle.innerHTML = 'Hello World';

&lt;div id="regTitle"&gt;&lt;/div&gt;

最短的

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

// note: no quotes around regTitle
$(regTitle).html('Hello World');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="regTitle"></div>

【讨论】：

【解决方案14】：

var abc = document.getElementById("regTitle");
abc.innerHTML = "Hello World";

【讨论】：

问题是关于 JQUERY - 不是 - Javascript！