在元素之前或者之后插入新的元素

在给定的 DOM 元素之前或者之后插入新的元素

---

函数insertAfter()允许你在DOM树中的现有元素之后插入一个新元素：

function insertAfter(el, referenceNode) {
  referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
}

// example
var newEl = document.createElement('div');
newEl.innerHTML = '<p>Hello World!</p>';

var ref = document.querySelector('div.before');

insertAfter(newEl, ref);
      

要在另一个元素之前插入一个元素，我们可以使用一个非常类似的辅助函数:insertBefore()

function insertBefore(el, referenceNode) {
  referenceNode.parentNode.insertBefore(el, referenceNode);
}

// example
var newEl = document.createElement('div');
newEl.innerHTML = '<p>Hello World!</p>';

var ref = document.querySelector('div.before');

insertBefore(newEl, ref);
      

所有主浏览器（包括IE 8和更低版本）都支持这些DOM方法。

如果打算以HTML文本字符串的形式插入新结构，则应使用 insertAdjacentHTML()。 此方法将指定的文本解析为HTML，并将结果元素插入DOM树中的指定位置。 它不会重新解析正在使用该元素的元素，因此不会破坏该元素内部的现有元素。