迹忆客 专注技术分享

对于浏览器而言，修改 DOM 内容是最基本的任务。有时我们希望根据某些操作更改 DOM 文本，而无需重新渲染整个 DOM。在本文中，我们将学习如何通过 DOM 将文本添加到 JavaScript 中的现有文本元素。

在 JavaS 中使用 appendChild 通过 DOM 将文本添加到现有文本元素

DOM 包含节点列表。每个节点都包含自己的数据。JavaScript 允许将新节点实例添加到选定父节点内的现有子节点列表中。

语法：

appendChild(aChild);

appendChild() 函数采用新创建节点的输入参数或必须添加到父节点的最常见元素。如果 appendChild() 引用现有节点，则将给定子节点从其当前位置移动到新位置。

它返回作为添加的子节点（子节点）的节点，除非子节点是 DocumentFragment。在这种情况下，将返回空 DocumentFragment。有关更多信息，请阅读 appendChild 方法的文档。

<p id="p">Hello </p>

<p id="p1">JavaScript Channel </p>

const text = document.createTextNode("Welcome to My channel");
const pNode = document.getElementById("p");
pNode.appendChild(text);

在上面的示例中，我们使用 document.createTextNode("Welcome to My channel") 创建了文本节点，然后将其附加到文档的 p 节点。上述代码的输出将创建一个如下所示的 DOM。

输出：

"Hello Welcome to My channel"

在 JavaScript 中通过 DOM 使用 textContent 向现有的文本元素添加文本

它是 Node 接口的属性，表示所选节点及其后代的文本内容。JavaScript 允许将其他文本从所选父节点中的子节点添加到当前文本内容中。

语法：

textContent = data ;

textContent 属性更新选定节点的文本内容。用户可以根据需要对文本数据进行修改，如拼接、更新等。如果节点为文档或文档类型，则 textContent 返回 null。textContent 返回其他节点类型的每个子节点的 textContent 的串联，注释和处理指令除外。当节点没有子节点时，这是一个空字符串。有关更多信息，请阅读 textContent 属性的文档。

const pNode = document.getElementById("p");
pNode.textContent += "Welcome to My channel";

在上面的示例中，我们使用 document.getElementById("p") 获取段落节点，然后将 Welcome to my channel 添加到段落节点的现有文本内容中。上面代码的输出更新了一个 DOM，如下所示：

输出：

"Hello Welcome to My channel"

使用 innerText 通过 DOM 将文本添加到 JavaScript 中的现有文本元素

它属于 HTMLElement。此属性表示所选节点及其后代的呈现文本内容。JavaScript 允许将其他文本从所选父节点中的子节点添加到当前文本内容中。

语法：

const renderedText = htmlElement.innerText
htmlElement.innerText = string

innerText 属性更新选定节点的文本内容。用户可以根据需要更改文本数据，例如连接、更新等。更多信息请参见 innerText 属性的文档。

const pNode = document.getElementById("p");
pNode.innerText += "Welcome to My channel";

在上面的示例中，我们使用 document.getElementById("p") 获取段落节点，然后将 Welcome to my channel 添加到段落节点的现有文本内容中。上面代码的输出更新了一个 DOM，如下所示：

输出：

"Hello Welcome to My channel"

textContent 和 innerText 之间的唯一区别是 textContent 获取所有元素的内容，包括 script 和 style 元素。相反，innerText 只显示人类可读的元素。textContent 返回节点的所有元素。相比之下，innerText 具有风格意识，不会从隐藏元素返回任何文本。原则上，innerText 识别文本的呈现外观，但 textContent 不识别。