原生js操作dom方法之insertAdjacentHTML

由 夕空 撰写于  2020年4月14日

概述

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

语法

element.insertAdjacentHTML(position, text);


position是相对于元素的位置,并且必须是以下字符串之一:

  • beforebegin: 元素自身的前面。
  • afterbegin: 插入元素内部的第一个子节点之前。
  • beforeend: 插入元素内部的最后一个子节点之后。
  • afterend: 元素自身的后面。

    text是要被解析为HTML或XML,并插入到DOM树中的字符串。

位置名称的可视化:

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

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

----

appendChild方法

// 创建div节点
var div = document.createElement("div");
// 装载html字符串
div.innerHTML = html;
element.appendChild(div);




声明:星耀夕空|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 原生js操作dom方法之insertAdjacentHTML


欢迎光顾我的小站!