使用 JavaScript 将文本附加到元素

作者

使用 JavaScript 将文本附加到元素

Append text to an Element using JavaScript

将文本附加到元素：

  1. 使用document.createTextNode()方法创建一个文本节点。
  2. 使用该appendChild()方法将文本节点附加到元素。
  3. 该appendChild方法会将文本节点添加到元素的子元素列表的末尾。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">
      Hello <span style="background-color: salmon">world</span>
    </div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
// ✅ Append text to element
const box = document.getElementById('box');
const text = document.createTextNode('!!!');
box.appendChild(text);

// ✅ (Alternative) Append text using insertAdjacentText
box.insertAdjacentText('beforeend', '???');

// ✅ Append HTML to element
box.insertAdjacentHTML(
  'beforeend',
  '<span style="background-color: yellow"> Additional html</span>',
);

document.getElementById()我们使用该方法选择了要将文本附加到的元素
。

下一步是使用
document.createTextNode
方法创建一个文本节点。

该方法接受一个字符串并从中创建一个文本节点。

这在获取用户提供的数据时特别有用，因为该方法会转义 HTML 字符并防止 XSS 攻击。

最后一步是使用
Node.appendChild
方法将文本节点追加到元素子元素的末尾。

如果您需要追加HTML到一个元素而不仅仅是文本，您可以改用这种方法：

索引.js
const box = document.getElementById('box');

box.insertAdjacentHTML(
  'beforeend',
  '<span style="background-color: yellow"> Additional html</span>',
);

insertAdjacentHTML
()
方法采用以下 2 个参数：

  • position– 相对于应插入 HTML 的元素的位置。可以是以下之一：

    • beforebegin– 在元素本身之前。
    • afterbegin– 就在元素内部，在它的第一个孩子之前。
    • beforeend– 就在元素内部，在它的最后一个子元素之后。
    • afterend– 在元素本身之后。

  • text– 要被解析为 HTML 并插入到 DOM 中的字符串。

应该注意的是，您不应该在不转义的情况下附加来自用户生成的输入的 HTML。

您还
可以使用insertAdjacentText
方法。

使用该insertAdjacentText()方法将文本附加到元素，例如
el.insertAdjacentText('beforeend', 'my text'). 该方法将一个位置和一个字符串作为参数，并在提供的相对于调用它的元素的位置插入一个新的文本节点。

索引.js
const box = document.getElementById('box');

box.insertAdjacentText('beforeend', ' additional text ');

该insertAdjacentText方法的第一个参数与 with 相同
insertAdjacentHTML——我们要插入文本节点的位置。

您选择哪种方法是个人喜好的问题。我会选择这种
insertAdjacentText方法，因为它更简洁直接。

–

发表评论