<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>插入节点 insertBefore</title>
<style>
div#parent{
600px;
height:300px;
background: yellowgreen;
overflow-y: auto;
}
a{
display: inline-block;
margin-right:10px;
margin-bottom:10px;
cursor: pointer;
}
</style>
</head>
<body>
bbbbbbbbbbbbbbbbbbbbbbb<br/>
bbbbbbbbbbbbbbbbbbbbbbb<br/>
<div id="parent">
<div id="one">第一个节点</div>
<!-- -->
<div id="tow">第二个节点</div>
</div>
bbbbbbbbbbbbbbbbbbbbbbb<br/>
bbbbbbbbbbbbbbbbbbbbbbb<br/>
bbbbbbbbbbbbbbbbbbbbbbb<br/>
<a href="javascript:add()">增加a</a>
<script>
function add(){
var a=document.createElement("a");
a.title="html5";
var oimg=document.createElement('img');
oimg.src="img/tab_19.jpg";
a.appendChild(oimg);
var opar=document.getElementById("parent");
var tow=document.getElementById("tow");
opar.insertBefore(a,tow);//父.insertBefore(新，旧)
a.onclick=function(){
opar.removeChild(this);//父节点.removeChild(子节点)
}
}
</script>
</body>
</html>
小结：
创建节点步骤：
1：创建元素节点 createElement
2：创建文本节点 createTextNode
3：将文本节点追加到元素节点 appendChild
4：获取父元素节点
5：将新元素节点添加到父元素节点中
节点删除：
父节点.removeChild(子节点)
节点插入：
父.insertBefore(新，旧)