<!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{
width: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>
// 插入节点---1
/* var newele=document.createElement("div");
newele.innerHTML="新插入的节点";
newele.style.color="red";
var par=document.getElementById("parent");
var tow=document.getElementById("tow");
// insertBefore(新节点,插入的位置);
par.insertBefore(newele,tow); */
// 插入节点---2
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:将新元素节点添加到父元素节点中
插入节点:
父.insertBefore(新,旧)
删除节点:
父.removeChild(子节点)