js 实现insertAfter

最新推荐文章于 2020-08-03 10:38:44 发布

转载最新推荐文章于 2020-08-03 10:38:44 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/eturn/p/4558925.html

本文介绍了一个JavaScript函数insertAfter，该函数用于在指定元素之后插入新的HTML内容。通过实例展示了如何使用此函数，并详细解释了DOM节点的各种属性如childNodes、previousSibling等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function insertAfter(ele,html){
    var new_ele = document.createElement("div");
    new_ele.innerHTML = html;
    var parent = ele.parentNode || document.body;
    parent.insertBefore(new_ele.firstChild, ele.nextSibling);
}

var d = document.getElementById("test");
insertAfter(d,"<div>dddddddd</div>")

<div id="test">a
    <div>Item1</div>
    <div>Item2</div>
    <div>Item3</div>
    <div>Item4</div>b
</div>

var d = document.getElementById("test");
d.childNodes;//...
d.previousSibling;//null
d.nextSibling;//null
d.parentNode;//body
d.firstChild;//a
d.lastChild;//b
d.lastChild.textContent;//b
d.lastChild.previousSibling.innerHTML;//Item4

d.childElementCount;//4
d.lastElementChild;//<div>Item4</div>

d.childNodes.length;//9
d.childNodes[0];//"a"
d.childNodes[1];//<div>Item1</div>
d.childNodes[2];//""