DOM节点操作
1.创建增加节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//createElement() 元素节点的创建，
var div1=document.createElement("div");//createTextNode() 创建一个文本节点
var text1=document.createTextNode("我是新建的div");//创建一个内容是：我是新建的div 的文本节点
//父节点.appendChild() 增加节点(把节点放到容器里，添加到该容器末尾处)
div1.appendChild(text1);//把创建的文本节点放到div里
document.body.appendChild(div1);//新建的div元素放到body里面，参数是要放的内容
</script>
</body>
</html>
2.插入删除节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ddd</li>
</ul>
<script type="text/javascript">
//创建一个li标签
var li1=document.createElement("li");//创建一个新的节点
var text1=document.createTextNode("ccc");//创建一个文本节点，内容为ccc
li1.appendChild(text1);//把文本节点放到li里面
//父节点.ul.insertBefore(新节点，坐标) 插入节点 插到坐标前面
var ul=document.getElementsByTagName('ul')[0];//获取ul
ul.insertBefore(li1,ul.lastElementChild);//把新创建的li插入到<li>ddd</li>之前
//父节点.removeChild(变量名) 删除节点
// document.body.removeChild(ul)//括号里放入以获取的变量名
var list=document.getElementsByTagName("li");
for (i=1;i<list.length;i++) {
ul.removeChild(list[i]);
i--;
}
</script>
</body>
</html>
3.替换节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1">
<img src="12923.jpg"/>
</div>
<script type="text/javascript">
var img1=document.getElementsByTagName("img")[0];
// img.src="13064.jpg";
//父节点.replaceChild(新节点，需要替换的节点) 替换节点
var div1=document.getElementsByTagName("div")[0];
var newimg=document.createElement('img');
newimg.src='13064.jpg';
div1.replaceChild(newimg,img1)
</script>
</body>
</html>
4.克隆节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
<tr>
<th><input type="checkbox" name="" id="" value="" /></th>
<th>姓名</th>
<th>性别</th>
<th>删除</th>
</tr>
</table>
<input type="button" name="but" id="but" value="复制表格" />
<script type="text/javascript">
//原节点.cloneNode(true/false) 克隆节点 true深度克隆 false浅度克隆
var inputbut=document.getElementById('but');
inputbut.onclick=function () {
var table=document.getElementsByTagName('table')[0];
var newtable=table.cloneNode(true);
document.body.insertBefore(newtable,document.getElementById("but"));
}
</script>
</body>
</html>
