JavaScript 更改文本
Ammar Ali
2023年1月30日
2021年7月3日
本教程将讨论如何使用 JavaScript 中的 textContent 属性和 createTextNode() 函数更改元素的文本。
使用 JavaScript 中的 textContent 属性更改元素的文本
如果你想用一些新文本替换一个元素的旧文本，你需要使用它的 id 或类名来获取该元素，然后你可以使用 textContent 属性用新文本替换旧文本。如果未指定 id 或类名，则可以使用 id 或 class 属性为元素提供 id 或类名。确保 id 或类名是唯一的；否则，任何具有相同 id 的元素也将被更改。例如，让我们使用 span 标签创建一个文本元素，并使用 JavaScript 中的 textContent 函数更改其文本。请参考下面的代码。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span id="SpanID"> Old Text </span>
<script type="text/javascript">
document.getElementById("SpanID").textContent="New Text";
</script>
</body>
</html>
输出：
New Text
JavaScript 代码放置在上述代码中的 HTML 文件中，但你可以根据需要将它们分开。你还可以指定更改文本的条件，例如单击按钮。如果你不想替换文本而是在旧文本中附加一些新文本，则可以使用以下方法。
使用 JavaScript 中的 createTextNode() 函数更改元素的文本
如果要将新文本附加到旧文本，则需要使用其 id 或类名获取该元素，然后使用 createTextNode() 函数，你可以创建新文本的节点并使用 appendChild() 函数，你可以将新文本附加到旧文本中。如果未指定 id 或类名，则可以使用 id 或 class 属性为元素提供 id 或类名。确保 id 或类名是唯一的；否则，任何具有相同 id 的元素也将被更改。例如，让我们使用 span 标签创建一个文本元素，并使用 JavaScript 中的 createTextNode() 函数附加其文本。请参考下面的代码。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span id="SpanID"> Old Text </span>
<script type="text/javascript">
Myspan = document.getElementById("SpanID");
Mytxt = document.createTextNode("New text");
Myspan.appendChild(Mytxt);
</script>
</body>
</html>
输出：
Old Text New Text
正如你在输出中看到的，新文本与旧文本连接在一起。
Author: Ammar Ali
