在 JavaScript 中向元素添加文本

Shraddha Paghdar 2023年1月30日 2022年5月5日
  1. 在 JavaS 中使用 appendChild 通过 DOM 将文本添加到现有文本元素
  2. 在 JavaScript 中通过 DOM 使用 textContent 向现有的文本元素添加文本
  3. 使用 innerText 通过 DOM 将文本添加到 JavaScript 中的现有文本元素
在 JavaScript 中向元素添加文本

对于浏览器而言,修改 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 获取所有元素的内容,包括 scriptstyle 元素。相反,innerText 只显示人类可读的元素。textContent 返回节点的所有元素。相比之下,innerText 具有风格意识,不会从隐藏元素返回任何文本。原则上,innerText 识别文本的呈现外观,但 textContent 不识别。

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

相关文章 - JavaScript DOM