Javascript 替换 DOM 中的文本

在前端开发中，经常需要通过Javascript操作DOM元素。其中一个最基本的需求便是替换其中的文本内容。下面我们介绍几种Javascript替换DOM中文本的方法。

1. innerHTML

innerHTML 是一个常用的操作DOM元素的方法，它可以操作元素的HTML内容。当我们需要替换一个元素的文本内容时，可以通过将要替换的文本内容赋值给元素的 innerHTML 属性实现。

let element = document.getElementById("myElement");
element.innerHTML = "我是新的文本内容";

需要注意的是，使用 innerHTML 替换文本内容时，会将原来的HTML代码一同替换掉。如果要替换的文本中包含HTML代码，需要特别谨慎，以免出现不必要的错误。

2. textContent

textContent 属性用于获取或设置元素中的文本内容。它会忽略所有HTML标签，只显示纯文本内容。因此，使用 textContent 替换元素的文本内容非常安全。

let element = document.getElementById("myElement");
element.textContent = "我是新的文本内容";

与 innerHTML 不同的是，textContent 只会替换元素的纯文本内容，而不会替换任何HTML代码。

3. createTextNode

createTextNode() 方法用于创建一个文本节点对象。我们可以通过将这个节点对象添加到一个元素中，从而实现文本内容的替换。

let element = document.getElementById("myElement");
let newTextNode = document.createTextNode("我是新的文本内容");
element.appendChild(newTextNode);

这种方法通常用于需要对特定的文本内容进行操作时，例如把某些特定字符替换成其他字符等。

4. 修改属性值

对于一些表单元素，例如 input 标签和 textarea 标签，它们的文本内容可以通过修改它们的 value 属性值来实现。

let inputElement = document.getElementById("myInput");
inputElement.value = "我是新的文本内容";

let textareaElement = document.getElementById("myTextarea");
textareaElement.value = "我是新的文本内容";

需要注意的是，使用这种方法替换文本内容只适用于表单元素，对于其他元素还是需要使用前面介绍的替换方法。

以上是Javascript替换DOM中文本的几种方法。对于不同的需求可以选择不同的方法来实现。