在 JavaScript 中向元素添加文本
-
在 JavaS 中使用
appendChild
通过 DOM 将文本添加到现有文本元素 -
在 JavaScript 中通过 DOM 使用
textContent
向现有的文本元素添加文本 -
使用
innerText
通过 DOM 将文本添加到 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 获取所有元素的内容,包括 script
和 style
元素。相反,innerText 只显示人类可读的元素。textContent
返回节点的所有元素。相比之下,innerText
具有风格意识,不会从隐藏元素返回任何文本。原则上,innerText 识别文本的呈现外观,但 textContent 不识别。
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