文章导航

JavaScript在指定元素后面插入元素

2017-11-20 11:54| 发布者: antzone| 查看: 608| 评论: 0|来自: 蚂蚁部落

本章节介绍一下如何利用javascript将一个指定元素移动到另一个元素的后面。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<script type="text/javascript"> 
function insertAfter(newElement,targetElement){ 
  var parent=targetElement.parentNode; 
  if(parent.lastChild==targetElement){ 
    parent.appendChild(newElement); 
  } 
  else{ 
    parent.insertBefore(newElement,targetElement.nextSibling); 
  } 
} 
window.onload=function(){ 
  var bt=document.getElementById("bt");
  var obox=document.getElementById("box");
  var lis=obox.getElementsByTagName("li");
   
  bt.onclick=function(){
    insertAfter(lis[0],lis[3])
  }
} 
</script>  
</head>  
<body>  
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
</ul>
<input type="button" id="bt" value="查看效果"/>
</body>  
</html>

以上代码实现了我们的要求,下面对此功能实现过程做一下简单介绍。

特别说明:appendChild()和insertBefore()都是移动元素,而不是克隆一个元素,然后再插入。

一.代码注释:

(1).function insertAfter(newElement,targetElement){},此函数可以在指定元素的后面插入指定元素,第一个参数是要插入的元素,第二个参数是目标元素,也就是会在它的后面插入元素。

(2).var parent=targetElement.parentNode,获取目标元素的父元素。

(3).if(parent.lastChild==targetElement){parent.appendChild(newElement);},判断父节点的最有一个子节点是否就是目标节点,如果是的话就使用appendChild()函数进行节点追加。

(4).else{parent.insertBefore(newElement,targetElement.nextSibling);},如果目标节点不是最后一个节点,那么就使用insertBefore()函数进行插入操作。

二.相关阅读:

(1).parentNode参阅JavaScript parentNode属性用法一章节。 

(2).lastChild参阅JavaScript lastChild属性用法一章节。

(3).appendChild()参阅JavaScript appendChild()一章节。

(4).nextSibling参阅JavaScript nextSibling属性一章节。

(5).getElementsByTagName()参阅getElementsByClassName()用法一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部