<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Document</title>
<script type="text/javascript">
//测试insertBefore 除了插入节点，还可以移动节点
window.onload = function() {
var cityNode = document.getElementById("city");
var bjNode = document.getElementById("bj");
var xyjNode = document.getElementById("xyj");
//cityNode.insertBefore(rlNode, bjNode)
var szNode = document.getElementById("sz");
insertAfter(xyjNode, szNode);
}
//把newNode插入到refNode的后面.W3C标准没有提供这个方法。
function insertAfter(newNode, refNode) {
//测试refNode是否为其父节点最后一个子节点。
var parentNode = refNode.parentNode;
if (parentNode) {
var lastNode = parentNode.lastChild;
if (refNode == lastNode) {
//如果是，直接把newNode插入为refNode父节点的最后一个子节点，appendChild
parentNode.appenChild(newNode);
} else {
//如果不是，获取refNode的下一个兄弟节点，然后插入到其下一个兄弟节点的前面
var nextNode = refNode.nextSibling;
parentNode.insertBefore(newNode, nextNode);
}
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市？</p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="sh">上海</li>
<li id="sz">深圳</li>
<li id="sz2">深圳2</li>
</ul>
<p>你喜欢哪本书？</p>
<ul id="book">
<li id="xyj" name="xyj">西游记</li>
<li>三国演义</li>
<li>水浒传</li>
<li>水浒传2</li>
</ul>
</html>innerHTML 非DOM标准，但所有的浏览器都支持
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Document</title>
<script type="text/javascript">
//测试innerHTML
window.onload = function() {
var cityNode = document.getElementById("city");
//alert(cityNode.innerHTML);
//互换city节点和book节点里面的内容
var tempHTML = cityNode.innerHTML;
var bookNode = document.getElementById("book");
cityNode.innerHTML = bookNode.innerHTML;
bookNode.innerHTML = tempHTML;
}
</script>
</head>
<body>
<p>你喜欢哪个城市？</p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="sh">上海</li>
<li id="sz">深圳</li>
<li id="sz2">深圳2</li>
</ul>
<p>你喜欢哪本书？</p>
<ul id="book">
<li id="xyj" name="xyj">西游记</li>
<li>三国演义</li>
<li>水浒传</li>
<li>水浒传2</li>
</ul>
</html>
