JavaScript 更改文本

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript 更改文本

作者：迹忆客最近更新：2024/03/17 浏览次数：

本教程将讨论如何使用 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

正如你在输出中看到的，新文本与旧文本连接在一起。

上一篇：使用 Javascript 更改 Div 的文本

下一篇：在 JavaScript 中打印到控制台

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享