使用 JavaScript 将文本附加到段落元素

Append text to a Paragraph element using JavaScript

使用该insertAdjacentText()方法将文本附加到段落元素，例如p.insertAdjacentText('beforeend', 'my text')。该方法在提供的位置插入一个新的文本节点，相对于调用它的元素。

以下是本文示例的 HTML。

索引.html


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

  <body>
    <p id="paragraph">
      One, <span style="background-color: aquamarine">Two,</span>
    </p>

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

这是相关的 JavaScript 文本。

索引.js


const p = document.getElementById('paragraph');

// ✅ Append text to paragraph
p.insertAdjacentText('beforeend', ' Three');

// ✅ Append HTML to paragraph
p.insertAdjacentHTML(
  'beforeend',
  '<span style="background-color: yellow">, Four</span>',
);

我们使用的document.getElementById()方法来选择段落。

insertAdjacentText

方法采用以下 2 个参数：

position– 相对于应插入文本的元素的位置。可以是以下4种之一：

beforebegin– 在元素本身之前。
afterbegin – just inside the element, before its first child.
beforeend – just inside the element, after its last child.
afterend – after the element itself.

data – the string from which to create a new text node to insert at the
given position.

In the example, we inserted text just inside the p element, after its last
child, but you can change the first parameter depending on your use case.

An alternative approach is to create a text node and append it to the p
element.

index.js


const p = document.getElementById('paragraph');

const textNode = document.createTextNode(' Three');

p.appendChild(textNode);

The
createTextNode
method takes a string and creates a text node from it.

The method escapes HTML characters, so you don’t have to worry about XSS attacks when working with user generated input.

下一步是使用
appendChild
方法将文本节点附加到元素的子元素列表的末尾。

如果需要将 HTML 附加到p元素，请使用insertAdjacentHTML
方法。

索引.js


const p = document.getElementById('paragraph');

// ✅ Append HTML to paragraph
p.insertAdjacentHTML(
  'beforeend',
  '<span style="background-color: yellow">, Four</span>',
);

该方法采用的第一个参数与 with 相同insertAdjacentText– 应该插入 HTML 的位置。

第二个参数是一个 HTML 字符串。

此方法不应与用户提供的输入一起使用，除非它被转义，因为它会成为 XSS 攻击的载体。

–