使用 jQuery 更新 innerHTML

在今天的文章中，我们将学习如何在 jQuery 中更新或替换元素的内部 HTML。

使用 jQuery 更新 innerHTML

jQuery 提供了 .html() 方法来设置匹配元素集中每个元素的 HTML 内容。

语法：

.html(htmlString).html(function)

1. htmlString 是一个 HTML 字符串，设置为每个匹配元素的内容。
2. 这是一个将 HTML 内容返回到集合的函数。集合中元素的旧 HTML 值和索引被视为参数。

在调用函数之前，jQuery 会清空元素。然后它使用旧的 HTML 参数来查询旧的内容。this 可以引用函数内部集合中的当前元素。

当 .html() 用于设置元素的内容时，该元素中的任何内容都将完全替换为新内容。此外，在用全新的内容替换这些元素之前，jQuery 从子元素中去除了其他结构，如信息和事件处理程序。

此方法使用浏览器的 innerHTML 属性。

某些浏览器可能无法生成完全复制提供的 HTML 源的 DOM。使用 .text() 方法设置不包含 HTML 的 script 元素的内容，而不是使用 .html() 方法。

让我们通过以下示例来理解它。

HTML 代码：

<div class="txt-container">Hello World! Welcome to the DelftStack.</div>
<button type="button">Change the text</button>

JavaScript 代码：

$('button').click(() => {
  $('div.txt-container')
      .html('<p>Thank you for visiting <em>DelftStack!</em></p>');
})

在上面的例子中，我们定义了 div 元素，它打印 Hello World! Welcome to the DelftStack. 信息。当你单击 Change the text 按钮时，它将使用新的段落标签更新 DOM。

尝试在任何支持 jQuery 的浏览器中运行上面的代码片段。它将显示以下结果。

更改文本前的输出：

更改文本后的输出：

运行演示