📌  相关文章
📜  HTML | DOM insertAdjacentText() 方法(1)

📅  最后修改于: 2023-12-03 14:41:48.167000             🧑  作者: Mango

HTML | DOM insertAdjacentText() 方法

insertAdjacentText() 方法是 HTML DOM 元素对象的一个成员，用于在指定的位置之前或之后插入文本。此方法不会解释插入的文本中的 HTML 标记。该方法提供四种插入文本的位置，分别是 'beforebegin'、'afterbegin'、'beforeend' 和 'afterend'。

语法
element.insertAdjacentText(position, text)

参数说明：

  • position: 必填项，表示插入文本的位置，可以是以下四个值之一：
    • 'beforebegin': 插入在元素之前。
    • 'afterbegin': 插入在元素的第一个子元素之前。
    • 'beforeend': 插入在元素的最后一个子元素之后。
    • 'afterend': 插入在元素之后。
  • text: 必填项，表示要插入的文本。
实例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>insertAdjacentText() 方法实例</title>
  <script>
    function insertText() {
      // 获取元素
      var p = document.getElementById("myP");
      // 在<p>元素之前插入文本
      p.insertAdjacentText("beforebegin", "插入在元素之前。");
      // 在<p>元素之后插入文本
      p.insertAdjacentText("afterend", "插入在元素之后。");
      // 在<p>元素第一个子元素之前插入文本
      p.insertAdjacentText("afterbegin", "插入在第一个子元素之前。");
      // 在<p>元素最后一个子元素之后插入文本
      p.insertAdjacentText("beforeend", "插入在最后一个子元素之后。");
    }
  </script>
</head>
<body>
  <h2>insertAdjacentText() 方法实例</h2>
  <p id="myP">这是一个文本。</p>
  <button onclick="insertText()">插入文本</button>
</body>
</html>

运行效果：

insertAdjacentText 方法实例效果图

注意事项
  • insertAdjacentText() 方法不支持在所有 HTML 元素上使用，这取决于浏览器的实现。
  • 插入的文本会按照原样插入，不会解析为 HTML 元素。
  • 插入的文本中如果包含了代码，浏览器会将其作为普通文本进行显示，而不会将其作为代码进行解析。
  • 插入文本的位置必须放在开头或结尾等特殊位置时使用，如果只是插入普通文本，推荐使用 textContent 属性或 innerHTML 属性来插入。