使用 Javascript 更改 Div 的文本
-
使用
innerHTML属性更改div文本 -
使用
textContent节点属性更改 Div 的内容 -
内部 HTML 与
textcontent安全方面 -
使用
:after伪元素更改div文本
div 元素本质上是非交互式的。Javascript 通过使其具有交互性来为其注入活力。我们可能需要改写由 div 显示的文本。例如，在实现编辑功能时，我们可能会重复使用为开发添加功能而设计的屏幕。只是措辞需要改变。至于添加功能，我们可能需要将按钮的添加关键字改写为更新等等。让我们看看几种可以动态更改 div 文本的方法。
使用 innerHTML 属性更改 div 文本
与其他编程语言不同，我们不使用 getter 和 setter 方法将文本设置为 HTML 元素。div 的 HTML 元素对象有一个名为 innerHTML 的属性。我们可以使用它来获取和设置 HTML 对象的内容。此处 HTML 对象将处于活动状态。也就是说，它反映了刷新时浏览器中元素属性的任何更改。
以下是使用 innerHTML 的语法。
var text = htmlElement.innerHTML;
htmlElement.innerHTML = 'New Text';
在上面的代码片段中，我们使用 htmlElement.innerHTML 获取 HTML div 元素的内容。此处，htmlElement 是实际的 HTML 对象。类似地，我们可以使用相同的属性，即元素的 innerHTML，将内容设置为 div。我们只是将文本内容分配给 innerHTML。
- 用法：
<div id="div-element">Hey there!!</div>
window.onload = function() {
document.getElementById('div-element').innerHTML = 'Hello World!!';
console.log(document.getElementById('div-element').innerHTML);
var el = document.getElementById('div-element');
el.textContent = 'Hello bunny!!';
console.log(document.getElementById('div-element').innerHTML);
}
输出：
Hello World!!
Hello bunny!!
在我们应用 .innerHTML 之前，我们需要选择 HTML 元素。我们可以通过各种方式做到这一点。Javascript 有许多函数可以用来从 DOM 中查询元素。以下是一些最常用的方法。
getElementById()：document接口的这个函数用于使用 HTML 中指定的id从DOM中选择一个元素。该函数返回对应于所选元素的 HTML 对象。getElementsByClassName：我们可以使用getElementsByClassName函数根据css class name查询元素。此 javascript 方法将多个元素作为 HTML 对象数组返回。getElementsByName：还有另一种方法可以选择具有name属性的元素。我们在 HTML 中为节点指定 name 属性。此方法返回一个HTML对象数组。我们可以使用它，特别是如果我们有兴趣选择具有特定样式、CSS 类的多个元素并一次性对它们进行操作。getElementsByTagName：我们还可以使用getElementsByTagName()函数根据 HTML 标签选择元素。例如，我们可以对DOM等部分中的所有div元素执行一些操作。顾名思义，该函数返回一个HTML对象数组。querySelector：JavascriptquerySelector函数更通用，可用于通过css query选择HTML元素。该函数返回满足在其参数中传递的条件的第一个元素。querySelectorAll：这个类似于querySelector，唯一的区别是它会返回多个满足作为参数传递给它的css query格式的元素。
使用 textContent 节点属性更改 Div 的内容
尽管我们经常使用 innerHTML，但使用它存在安全风险。它与 innerHTML 如何替换 HTML 元素的内容有关。innerHTML 属性在一个镜头中删除所有子 HTML 节点，并添加其中指定的新内容。
安全风险来自于 innerHTML 属性允许我们插入任何一段 HTML 代码，即使它是有害的代码。我们将在下一节讨论这个方面。MDN 建议使用 node.textContent 来更改元素的文本。它用我们在 textContent 参数中分配的 text 替换 HTML 中的子节点。参考以下代码了解用法。
<div id="div-element">Hey there!!</div>
window.onload = function() {
var el = document.getElementById('div-element');
el.textContent = 'Hello bunny!!'
}
输出：
Hello bunny!!
在这里，我们在更改文本之前选择 HTML 元素 div。我们使用 getElementById() 函数从 DOM 中查询元素。然后我们使用 textContent 来更改 div 的文本。屏幕加载时不会区分此更改。一旦浏览器加载网页，window.onload 函数就会被执行，并且文本会发生变化。因此，最终用户始终会看到较新的文本。在屏幕加载时，旧文本到新文本的变化并不明显。我们还可以在 setTimeOut 方法中使用 textContent 来查看更改。
内部 HTML 与 textcontent 安全方面
innerHTML 属性与 textContent 不同。这两个属性都以文本作为输入，但是，这里的安全漏洞是什么？在 innerHTML 中，可以添加恶意代码。请参阅以下代码片段。在这里，更改反映出来，并且将执行 innerHTML 代码。如以下代码片段所示，单击浅绿色 HTML div 元素时，屏幕上会弹出一个不需要的 alert。
<div id="div-element"></div>
window.onload = function() {
var el = document.getElementById('div-element');
el.innerHTML =
`<div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')">`;
}
如果我们在 textContent 中为 div 元素分配相同的内容，它不会将其呈现为 HTML 元素。Javascript 将内容呈现为屏幕上的文本。所以我们可以从字面上看到 <div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')"> 在网页中显示为文本。这方面使代码更加安全可靠。因此，如果我们打算更改 HTML 元素的文本，Javascript 最佳实践（由 MDN 支持）建议使用 textContent 而不是 innerHTML 属性。
<div id="div-element"></div>
window.onload = function() {
var el = document.getElementById('div-element');
el.textContent =
`<div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')">`;
}
使用 :after 伪元素更改 div 文本
如果文本更改微不足道，我们可以使用 CSS 来更改 div 文本。我们使用 :after 伪 HTML 元素，在其中添加我们希望在 content 属性中显示的文本。它不适用于像 <img> 这样的 HTML 元素，其中浏览器将内容替换为加载的图像。下面的代码详细说明了用法。
<div class="pvw-title"><span>Facts</span></div>
.pvw-title span {
display: none;
}
.pvw-title:after {
content: 'whatever it is you want to add';
}