insertAdjacentHTML用于插入节点

elem.insertAdjacentHTML(where, html)。
该方法的第一个参数是代码字（code word），指定相对于 elem 的插入位置。必须为以下之一：

  • "beforebegin" — 将 html 插入到 elem 前插入，
  • "afterbegin" — 将 html 插入到 elem 开头，
  • "beforeend" — 将 html 插入到 elem 末尾，
  • "afterend" — 将 html 插入到 elem 后。

第二个参数是 HTML 字符串，该字符串会被“作为 HTML” 插入。
例如：

  1. <div id="div"></div>
  2. <script>
  3.   div.insertAdjacentHTML('beforebegin', '<p>Hello</p>');
  4.   div.insertAdjacentHTML('afterend', '<p>Bye</p>');
  5. </script>

这个方法有两个兄弟：

  • elem.insertAdjacentText(where, text) — 语法一样，但是将 text 字符串“作为文本”插入而不是作为 HTML，
  • elem.insertAdjacentElement(where, elem) — 语法一样，但是插入的是一个元素。

它们的存在主要是为了使语法“统一”。实际上，大多数时候只使用 insertAdjacentHTML。因为对于元素和文本，我们有 append/prepend/before/after 方法 — 它们也可以用于插入节点/文本片段，但写起来更短。