insertAdjacentHTML与appendChild方法区别

2019-04-04208次阅读javascriptDOM

在向HTML DOM添加新元素时,HTML元素可选方法有appendChild、insertAdjacentHTML和innerHTML属性。

Element.appendChild()

是将一个节点添加到指定父节点的子节点列表末尾。

<div id="ele">
    <p>这是一个段落</p>
</div>
<script>
    var newElement = document.createElement("p"),
    newElement.innerHTML = "这是新段落。";
    var element = document.getElementById("ele");
    element.appendChild( newElement );
</script>

要强调的是:参数一定要是一个节点,例如元素节点或文本节点等,而不是一个字符串,拥有返回值,返回值就是添加的新节点

Element.innerHTML属性

设置或获取描述元素后代的HTML语法。

<div id="ele">
    <p>这是一个段落</p>
</div>
<script>
var element = document.getElementById("ele");
element.innerHTML = element.innerHTML + '<p>这是新段落。</p>';
</script>

要强调的是:属性值是一个字符串而不是元素节点或文本节点等,拥有返回值,返回值就是添加的字符串

element.insertAdjacentHTML

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

语法

element.insertAdjacentHTML(position, text);

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

'beforebegin'

元素自身的前面。

'afterbegin'

插入元素内部的第一个子节点之前。

'beforeend'

插入元素内部的最后一个子节点之后。

'afterend'

元素自身的后面。

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

<div id="ele">
    <p>这是一个段落</p>
</div>
<script>
var element = document.getElementById("ele");
element.insertAdjacentHTML('beforeend','<p>这是新段落。</p>')
</script>

浏览器兼容:IE4+

小结

appendChild的操作对象是节点,例如元素节点或文本节点等。insertAdjacentHTML、innerHTML的操作对象是字符串。

DOM中同时添加多个新元素时,根据场景采用insertAdjacentHTML或innerHTML操作字符串更便捷、性能更好。

上一篇: vue-datepicker-local实现小于当前时间不可选  下一篇: Intersection Observer实现滚动到相应区域执行动画及图片懒加载  

insertAdjacentHTML与appendChild方法区别相关文章