关于DOM的那点事之insertAfter

最新推荐文章于 2014-09-26 10:40:26 发布

undefined001

最新推荐文章于 2014-09-26 10:40:26 发布

阅读量351

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/undefined001/article/details/39523537

版权

JS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>insertAfter</title>
</head>

<body>
	 <ul id="ul1">
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
    </ul>
</body>
</html>
	<script>
    var oUl=document.getElementById('ul1');
	var oLis=oUl.getElementsByTagName('li');
	var oLi=document.createElement('li');
	oLi.innerHTML="我是DOM创建的Li";
	oUl.insertBefore(oLi,oLis[0].nextSibling);
	//sibling
	//previousSibling;上一个兄弟节点
	//nextSibling;下一个兄弟节点
	function insertAfter(newNode,oldNode){
		if(oldNode.nextSibling){//如果存在弟弟节点
			oldNode.parentNode.insertBefore(newNode,oldNode.nextSibling);
			}else{//否则
				oldNode.parentNode.appendChild(newNode)
				}
		}
		//下面验证一下 点谁就把他放到谁的后面
	for(i=0;i<oLis.length;i++){
		oLis.item(i).οnclick=function(){
			
			insertAfter(oLi,this);
			}
		}
    </script>

undefined001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于DOM的那点事之insertAfter

insertAfter 第一个第二个第三个第四个 var oUl=document.getElementById('ul1'); var oLis=oUl.getElementsByTagName('li'); var oLi=document.createElement('li');
复制链接

扫一扫

专栏目录