js DOM 操作—-insertBefore( ) 的用法；
含义：在某个元素之前插入一个新的元素；
先来写一个带有三个段落的网页：
<!doctype html>
<
html>
html>
<
head>
head>
<
meta
charset=
“utf-8”
>
meta
charset=
“utf-8”
>
<
title
>insertBefore()
</
title
>
title
>insertBefore()
</
title
>
</
head>
head>
<
body>
body>
<
p
class=
“first”
>我是第一个
</
p
>
p
class=
“first”
>我是第一个
</
p
>
<
p
class=
“second”
>我是第二个
</
p
>
p
class=
“second”
>我是第二个
</
p
>
<
p
class=
“third”
>我是第三个
</
p
>
p
class=
“third”
>我是第三个
</
p
>
</
body>
body>
</
html>
html>
接下来我们动态创建一个段落添加到first 和second 之间；
<!doctype html>
<
html>
html>
<
head>
head>
<
meta
charset=
“utf-8”
>
meta
charset=
“utf-8”
>
<
title
>insertBefore()
</
title
>
title
>insertBefore()
</
title
>
</
head>
head>
<
body>
body>
<
p
id=
“first”
>我是第一个
</
p
>
p
id=
“first”
>我是第一个
</
p
>
<
p
id=
“second”
>我是第二个
</
p
>
p
id=
“second”
>我是第二个
</
p
>
<
p
id=
“third”
>我是第三个
</
p
>
p
id=
“third”
>我是第三个
</
p
>
<
script
>
script
>
window.
onload
=
function
(){
onload
=
function
(){
var
newp
=
document.
createElement
(
“p”
);
//创建新的节点 p
newp
.
innerHTML
=
“我是新加的”
;
//给新创建的节点p 添加内容
var
second
=
document.
getElementById
(
“second”
);
// 获取原本的第二个节点p
document.body.
insertBefore
(
newp
,
second
);
//在第二个节点之前插入新创建的节点
insertBefore
(
newp
,
second
);
//在第二个节点之前插入新创建的节点
}
<
/
script
>
</
body>
body>
</
html>
html>
我们来看看 insertBefore() 的用法，
document.body.insertBefore(newp,second);
首先document.body是段落的父元素，insertBefore()里面有两个参数，
第一个参数表示要插入的节点，第二参数表示在哪个节点之前插入，
注意，第二个参数是可以为null 的，那么这个时候，只会在末尾插入节点了；
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/38463.html
