JavaScript 更新 Div 中的文本

如果您想要在 DOM 中更新文本内容，JavaScript 可以帮助您实现。本文将介绍一些常见的方法。

innerHTML

innerHTML 属性允许您将 HTML 代码插入到 Dom 元素中。例如：

document.getElementById("myDiv").innerHTML = "<h1>Hello World!</h1>";

这将在 id 为 myDiv 的元素中插入一个标题为 "Hello World!" 的 h1 元素。

请注意，innerHTML 会覆盖原有的内容，因此您需要考虑清楚何时使用它。

textContent

textContent 属性用于替换一个节点的文本内容。例如：

document.getElementById("myDiv").textContent = "Hello World!";

这将将 "Hello World!" 文本设置为 id 为 myDiv 的元素的内容。

与 innerHTML 不同，textContent 会忽略 HTML 标签，只显示文本。

createElement 和 appendChild

如果您想动态创建一个新的元素并将其添加到 DOM 中，您可以使用 createElement 和 appendChild 方法。例如：

var newElement = document.createElement("p");
var textNode = document.createTextNode("Hello World!");
newElement.appendChild(textNode);

var myDiv = document.getElementById("myDiv");
myDiv.appendChild(newElement);

这将创建一个新的 p 元素，包含文本 "Hello World!"，并将它添加到 id 为 myDiv 的元素中。

结论

以上是 JavaScript 中更新一个元素的文本内容的一些方法。这些方法可以让您在运行时动态变更您的网页，并且十分方便。