今天我们来看看DOM当中的innerHTML和insertBefore。今天是用的样例仍然与上次一样，样例代码如下：
<body>
<p>喜欢的城市</p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
<p>喜欢的语言</p>
<ul id="language">
<li id="js">javascript</li>
<li>python</li>
<li>c++</li>
<li>java</li>
</body>基本概念
innerHTML
innerHTML属性用于获取或设置元素的HTML内容。
如果想要获取某个元素内部的HTML结构时，可以使用 innerHTML 属性。这会返回该元素内部的HTML字符串，包括所有的子元素和它们的HTML内容。
同样地，你也可以使用 innerHTML 属性来设置某个元素内部的HTML内容。当你这样做时，原有的子元素会被新的HTML内容替换。
insertBefore
insertBefore允许将一个节点（newNode）插入到父节点（parentNode）中的指定子节点（referenceNode）之前。如果referenceNode是parentNode的第一个子节点，那么newNode将被插入为parentNode的第一个子节点。如果referenceNode是null，或者不是一个子节点，那么newNode将被添加到parentNode的子节点列表的末尾。
使用
innerHTML
获取内部的HTML结构
如果我们想要使用innerHTML，我们只需要直接使用“点”记性调用即可，代码和效果如下：
<script type = "text/javascript">
window.onload = function(){
var citynode = document.getElementById("city");
alert(citynode.innerHTML);
}
</script>
此时我们就获得了元素内部的HTML结构。
交换内部元素
如果我们想要交换两个内部的html元素，我们可以使用一个中间变量来完成：
<script type = "text/javascript">
window.onload = function(){
var citynode = document.getElementById("city");
//呼唤city和lánguage节点的内容
var tempNode = citynode.innerHTML;
var languageNode = document.getElementById("language");
citynode.innerHTML = languageNode.innerHTML;
languageNode.innerHTML = tempNode;
}
</script>
InsertBefore
基本使用-插入到前面
该方法除了插入，还有移动节点的功能，具体代码示例和效果示意如下：
<script type = "text/javascript">
window.onload = function(){
var cityNode = document.getElementById("city");
var bjNode = document.getElementById("bj");
var rlNode = document.getElementById("js");
cityNode.insertBefore(rlNode, bjNode);
}
</script>
插入到后面
如果我想要向后插入，我们需要使用进行判断，当父节点存在时则进行追加，如果父节点不存在就进行向前插入。
<script type = "text/javascript">
window.onload = function(){
var city = document.getElementById("city");
var bjNode = document.getElementById("bj");
var jsNode = document.getElementById("js");
var refNode = document.getElementById("sh");
insertAfter(jsNode,refNode);
}
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>