移动端使用element.insertAdjacentHTML

insertAdjacentHTML() 将指定的文本解析为HTML或XML,并将结果节点插入到DOM树中的指定位置。
它不会重新解析它正在使用的元素,因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤,使其比直接innerHTML操作更快。

使用

element.insertAdjacentHTML(position, text);

position是相对于元素的位置,并且必须是以下字符串之一:
'beforebegin'
元素自身的前面。
'afterbegin'
插入元素内部的第一个子节点之前。
'beforeend'
插入元素内部的最后一个子节点之后。
'afterend'
元素自身的后面。
text是要被解析为HTML或XML,并插入到DOM树中的字符串。

注意

beforebegin和afterend位置,仅在节点在树中且节点具有一个parent元素时工作.

兼容性

基本没有兼容性问题


image.png

参考

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML

推荐阅读更多精彩内容

  • pdf下载地址:Java面试宝典 第一章内容介绍 20 第二章JavaSE基础 21 一、Java面向对象 21 ...
    王震阳阅读 73,756评论 25 504
  • 前端必读:浏览器内部工作原理 作者: Tali Garsiel发布时间: 2012-02-09 14:32阅读: ...
    我是强强阅读 178评论 0 2
  • 简介网络浏览器很可能是使用最广的软件。在这篇入门文章中,我将会介绍它们的幕后工作原理。我们会了解到,从您在地址栏输...
    wengjq阅读 747评论 2 13
  • 1. 介绍 浏览器可能是最广泛使用的软件。本书将介绍浏览器的工作原理。我们将看到,当你在地址栏中输入google....
    康斌阅读 835评论 8 18
  • 你已经掌握了相关活动非常多的知识,不过恐怕离完全灵活运用还有一段距离。虽然知识点只有这么多,但运用的技巧却是多种多...
    YMJ奥利给阅读 152评论 0 1