关于DOM的那点事之insertAfter

最新推荐文章于 2022-07-24 17:07:00 发布

原创最新推荐文章于 2022-07-24 17:07:00 发布 · 411 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种在网页中使用JavaScript实现元素插入的方法——insertAfter。通过具体实例展示了如何将一个新创建的<li>元素插入到指定<li>元素之后，并提供了可交互的示例代码。此外，还介绍了如何通过点击事件动态调整<li>元素的位置。

<!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).onclick=function(){
			
			insertAfter(oLi,this);
			}
		}
    </script>