JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
JS实现DOM节点插⼊操作之⼦节点与兄弟节点插⼊操作
⽰例
本⽂实例讲述了JS实现DOM节点插⼊操作之⼦节点与兄弟节点插⼊操作。
分享给⼤家供⼤家参考，具体如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> JS节点插⼊</title>
<script>
function showinsert(){ //添加⼦节点
var str=document.getElementById("mydiv");
var zif="段落五";
var obj=document.createElement("p"); //添加哪类节点
var objNode=document.createTextNode(zif); //创建⽂字节点
str.appendChild(obj);
obj.appendChild(objNode);
}
function showesideinsert(){ //添加兄弟节点
var str=document.getElementById("mydiv");
var zi="添加段落";
var strBrother=str.children[1];
var strNode=document.createElement("p");
var strTextNode=document.createTextNode(zi);
str.insertBefore(strNode,strBrother);
strNode.appendChild(strTextNode);
}
</script>
</head>
<body>
<div id="mydiv">
<p onClick="showinsert()">段落⼀
<p onClick="showesideinsert()">段落⼆
<p>段落三
<p>段落四
</div>
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》及《》
希望本⽂所述对⼤家JavaScript程序设计有所帮助。