需求:在一个节点后插入一个新节点;
代码实现:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//js只提供insertBefore,现在自己写函数事项insertAfter
window.onload = function()
{
alert(1);
var cityNode = document.getElementById("city");
var xjNode = document.getElementById("xj");
var appleNode = document.getElementById("apple");
//cityNode.insertBefore(appleNode, bjNode);
insertAfter(appleNode,xjNode);
};
//自定义实现insertAfter 将新节点插入到老节点的后边
//实现逻辑:如果要增加的节点是最后一个节点,直接在父节点下增加
//如果不是父节点的最后一个节点,则在该节点的下一个节点调用insertBefore
function insertAfter(newNode,refNode)
{
var parentNode = refNode.parentNode;
if(parentNode)
{
var lastNode = parentNode.lastChild;
if(refNode==lastNode)
{
parentNode.appendChild(newNode);
}
else
{
var nextNode = refNode.nextSibling;
parentNode.insertBefore(newNode,nextNode);
}
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="nj">南京</li>
<li id="xj">西京</li>
<li id="dj">东京</li>
</ul>
<br><br>
<p>你喜欢哪类手机?</p>
<ul id="game">
<li id="apple">苹果</li>
<li id="sum">三星</li>
<li id="huawei">华为</li>
<li id="xiaomi">小米</li>
</ul>
<br>
name:<input type="text" name="username" id="name" value="atguigu">
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
</body>
</html>