传智博客
快捷导航
蚂蚁部落
蚂蚁部落 网站首页 实例代码 JS实例 查看内容

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

2017-11-12 11:54| 发布者: antzone| 查看: 54| 评论: 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>

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

一.代码注释:

(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()用法一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-11-19 20:14 , Processed in 0.068744 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部