18 document——操作HTML文档结构
首先要明确一点，操作HTML文档结构，是不会改变HTML源码的，改变的是HTML的document对象。
效果先看
innerHTML方式
增加节点
- 通过innerHTML获得标签下的代码，然后追加代码即可。
function addNode(){
var father = document.getElementById("father");
father.innerHTML += "<div><input type='file'><input type='button' value='删除' onclick='del(this)'><br></div>";
}
删除节点
- 首先调用此函数的删除标签通过this传入自身
- 通过传入的标签本身获得标签的父节点
- 父节点删除自身（包括所有子标签）
function del(obj){
//获取父节点(dic)
var father = obj.parentElement;
//父节点删除自己
father.remove();
}
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 添加节点
function addNode(){
var father = document.getElementById("father");
father.innerHTML += "<div><input type='file'><input type='button' value='删除' onclick='del(this)'><br></div>";
}
// 删除节点
function del(obj){
//获取父节点(dic)
var father = obj.parentElement;
//父节点删除自己
father.remove();
}
</script>
<h2>document结构操作：增加与删除节点</h2>
<input type="button" name="" id="" value="继续添加" onclick="addNode()"/>
<hr>
<div id="father">
<div><input type="file"><input type="button" value="删除" onclick="del(this)"><br></div>
</div>
</body>
</html>
推荐方式：document.createElement()
我们知道document是一个对象，js中可以直接给对象添加新的属性，所以，我们就使用 创建节点、将节点添加到指定节点下成为子节点 的方法即可。
下面我们同样以上面添加文件的例子来做。
创建节点
首先获取父节点，然后开始创建子节点。
所谓节点就是一个个的标签（元素）。
- document.createElement(标签名);
给节点添加属性,如添加type属性。
- 节点名.type="button";
添加到父节点
- 父节点变量.appenChild(节点变量);
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function test(){
//获取元素对象
var div = document.getElementById("div1");
//创建input元素对象
var inp = document.createElement("input");
inp.setAttribute("type","file");
//创建按钮元素对象
var btn = document.createElement("input");
btn.setAttribute("type","button");
btn.setAttribute("value","删除");
//把删除函数直接写一下，通过父节点删除
btn.onclick=function(){
div.removeChild(inp);
div.removeChild(btn);
div.removeChild(br);
}
//创建换行
var br = document.createElement("br");
//将创建的元素对象放到div中
div.appendChild(inp);
div.appendChild(btn);
div.appendChild(br);
}
</script>
<input type="button" name="" id="" value="继续添加" onclick="test()"/>
<div id="div1" style="border: 1px solid red;width: 300px;height: 200px;">
</div>
</body>
</html>
