javascript的insertBeforeinsertAfter和appendChild简单介绍

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript的insertBeforeinsertAfter和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的insertBeforeinsertAfter和appendChild简单介绍的主要内容，如果未能解决你的问题，请参考以下文章

前端基础-JavaScript的基本概述和语法

不懂急,请问javascript对象的问题?

前端之JavaScript第一天学习-JavaScript 简介

JavaScript-Runoob：JavaScript 语句

JavaScript学习指南之第一章Hello JavaScript！最基础的JavaScript入门

javascript的题。