Element: insertAdjacentText() 方法

语法

insertAdjacentText(where, data)

参数

其中

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

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

data

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

返回值

无（undefined）。

异常

SyntaxError DOMException

如果 where 的值不被识别，则会抛出异常。

位置名称的可视化

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

示例

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

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

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

规范

浏览器兼容性

另见

• Element.insertAdjacentElement()
• Element.insertAdjacentHTML()