首页 > 代码库 > javascript的insertBefore、insertAfter和appendChild简单介绍
javascript的insertBefore、insertAfter和appendChild简单介绍
target.insertBefore(newChild,existingChild)
参数说明:
1.target:被添加节点和现有节点的父节点。
2.newChild:将要被插入的节点。
3.existingChild:现有的节点，新节点将会被插入到它的前面，此参数值可以为null。
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>insertBefore()函数-蚂蚁部落</title> <script type="text/javascript"> window.onload=function(){ var obox=document.getElementById("box"); var lis=document.getElementsByTagName("li"); var newLi=document.createElement("li"); newLi.innerHTML="新蚂蚁部落"; obox.insertBefore(newLi,lis[1]);}</script> </head> <body> <ul id="box"> <li>蚂蚁部落一</li> <li>蚂蚁部落二</li> <li>蚂蚁部落三</li> <li>蚂蚁部落四</li></ul></body> </html>
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>insertBefore()函数-蚂蚁部落</title> <script type="text/javascript"> window.onload=function(){ var obox=document.getElementById("box"); var lis=document.getElementsByTagName("li"); var newLi=document.createElement("li"); newLi.innerHTML="新蚂蚁部落"; obox.insertBefore(newLi,null);}</script> </head> <body> <ul id="box"> <li>蚂蚁部落一</li> <li>蚂蚁部落二</li> <li>蚂蚁部落三</li> <li>蚂蚁部落四</li></ul></body> </html>
二.appendChild()函数:
此函数可以在父节点的内部的尾部追加一个新的节点。
target.appendChild(newChild)
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>insertBefore()函数-蚂蚁部落</title> <script type="text/javascript"> window.onload=function(){ var obox=document.getElementById("box"); var lis=document.getElementsByTagName("li"); var newLi=document.createElement("li"); newLi.innerHTML="新蚂蚁部落"; obox.appendChild(newLi);}</script> </head> <body> <ul id="box"> <li>蚂蚁部落一</li> <li>蚂蚁部落二</li> <li>蚂蚁部落三</li> <li>蚂蚁部落四</li></ul></body> </html>
三.insertAfter函数:
虽然DOM中没有提供insertAfter方法，但是我们可以通过insertBefore方法去完成这个方法的实现：function insert?After(newElement, targetElement) { var parent = targetElement?.parentNode; if(parent.lastChild == targetElement) { ?parent.appendChild(newElement); }? else { parent.insertBefore(newElement, targetElement.nextSibling);? }?}?下面，请看看这个函数是如何一步一步地完成工作的?
（1）首先，这个函数有两个参数:一个是将被插入的新元素，另一个是目标元素。这两个参数通过变量newElement和targetElement被传递到这个函数；
（2）把目标元素的parentNode属性值保存到变量parent里；
（3）接下来，检查目标元素是不是parent的最后一个子元素；
（4）如果是，就用appendChild方法把新元素追加到parent元素上,这样新元素就恰好被插入目标元素之后;
（5）如果不是，就把新元素插入到目标元素和目标元素的下一个兄弟元素之间，目标元素的下一个兄弟元素即目标元素的nextSibling属性，用insertBefore方法把新元素插入到目标元素的下一个兄弟元素之前。
javascript的insertBefore、insertAfter和appendChild简单介绍
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。