JS中insertAdjacentHTML()方法

JS中insertAdjacentHTML()方法

  一般我们在写JS时,想在一个DOM节点中插入HTML代码,这时有三种方法:

1.使用innerHTML

  缺点是会把原先该节点的代码全部覆盖掉。

2.使用insertBefore(),appendChild()方法

  缺点一是麻烦,需要先createElement()创建一个节点,再插入内容,最后再append到DOM树中。二是性能低下,具体见:DOM appendHTML实现及insertAdjacentHTML

3.使用insertAdjacentHTML()方法,更加灵活

  insertAdjacentHTML 方法:在指定的地方插入html标签语句

  原型:insertAdajcentHTML(swhere,stext)

  参数:

  swhere: 指定插入html标签语句的地方,

  stext:要插入的内容

  有四种值可用:

  1. beforeBegin: 插入到标签开始标记前

  2. afterBegin:插入到标签开始标记之后

  3. beforeEnd:插入到标签结束标记前

  4. afterEnd:插入到标签结束标记后

文章目录
  1. 1. JS中insertAdjacentHTML()方法
    1. 1.0.1. 1.使用innerHTML
    2. 1.0.2. 2.使用insertBefore(),appendChild()方法
    3. 1.0.3. 3.使用insertAdjacentHTML()方法,更加灵活
,