原生js在某个元素前后插入元素
in 前端 with 0 comment

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

in 前端 with 0 comment

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

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

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

其中position有这四个取值:beforebeginafterbeginbeforeendafterend

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

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

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

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

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

微信图片.png

参考文档

Element.insertAdjacentHTML() - Web APIs | MDN

Comments are closed.