元素: insertAdjacentText() 方法

insertAdjacentText() 是 Element 接口的方法，它在给定相对位置和字符串的情况下，会插入一个新的文本节点，该节点位于调用该方法的元素的给定位置的相对位置。

语法

js
insertAdjacentText(where, data)

参数

where

一个字符串，表示相对于调用该方法的元素的位置；必须是以下字符串之一

  • 'beforebegin': 在 element 本身之前。
  • 'afterbegin': 紧靠 element 内部，在其第一个子节点之前。
  • 'beforeend': 紧靠 element 内部，在其最后一个子节点之后。
  • 'afterend': 在 element 本身之后。
data

一个字符串，用于创建一个新的文本节点，并将其插入到相对于调用该方法的元素的给定位置 where。

返回值

无 (undefined).

异常

SyntaxError DOMException

如果 where 不是一个识别值，则会抛出此错误。

位置名称的可视化

html
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

注意： beforebegin 和 afterend 位置仅在节点位于树中且具有元素父节点时才有效。

示例

js
beforeBtn.addEventListener("click", () => {
  para.insertAdjacentText("afterbegin", textInput.value);
});

afterBtn.addEventListener("click", () => {
  para.insertAdjacentText("beforeend", textInput.value);
});

请查看我们 GitHub 上的 insertAdjacentText.html 演示（也请查看 源代码）。在这里，我们有一个简单的段落。您可以将一些文本输入表单元素中，然后按插入之前和插入之后按钮，使用 insertAdjacentText() 在现有段落文本之前或之后插入它。请注意，不会添加现有文本节点 - 将创建包含新添加内容的更多文本节点。

规范

规范
DOM 标准
# dom-element-insertadjacenttext

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅