原生js在某个元素前后插入元素

某个需求需要在老项目的2个元素之间插入一个广告元素，尝试了insertBefore、append、appendChild等方法都不如人意。

后来去MDN查资料的时候发现了insertAdjacent*()的几个方法，我个人还是比较喜欢使用insertAdjacentElement

1
2
3

element.insertAdjacentHTML(position, html)
element.insertAdjacentElement(position, Element)
element.insertAdjacentText(position, text)

其中position有这四个取值：beforebegin、afterbegin、beforeend、afterend。

分别对应了下面这四个位置：

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

比如我需要在#app前插入一个ad元素则可以这么写

1
2
3

var adEl = document.createElement('div')
adEl.id = "xxxx"
document.getElementById('app').insertAdjacentElement('beforebegin', adEl)

这几个方法的兼容性也是完全ok的，如图：

其他推荐内容