常用方法
添加相关的：
document.createElement("标签名") 创建节点对象
setAttribute("name","value"): 设置节点的属性
插入相关的：
appendChild("标签对象") ; 添加子节点对象
insertBefore("新标签对象","指定的对象") 在指定的对象前面添加子节点对象
删除相关的：
removeChild("标签对象"); 删除子节点
<body>
<input type="button" value="添加新按钮" onclick="addItem()"/>
<input type="button" value="删除" id="delBtn" onclick="delItem()"/>
</body>
<script type="text/javascript">
function addItem(){
//创建一个按钮
var item = document.createElement("input");
item.setAttribute("type","button");
item.setAttribute("value","新的按钮");
//拿到body标签对象
var varBody = document.getElementsByTagName("body")[0];
//直接在body中追加按钮
varBody.appendChild(item);
//:在添加和删除两个按钮中插入新创建的标签
//拿到删除按钮
/*var delBtn = document.getElementById("delBtn");
//在删除按钮前插入新按钮
varBody.insertBefore(item,delBtn);*/
}
function delItem(){
//拿到body标签
var varBody = document.getElementsByTagName("body")[0];
//拿到body标签下的最后一个标签
var lastChild = varBody.lastChild
//删除最后一个子标签
varBody.removeChild(lastChild);
}
</script>
标签属性方法.gif
作业：动态添加删除表格
<style type="text/css">
td{
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<th>编号</th>
<th>用户名</th>
<th>密码</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="text"/></td>
<td><input type="password"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td><input type="button" value="添加新行" onclick="addItem()"/></td>
<td><input type="button" value="删除一行" onclick="delItem()"/></td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
var count=1;
function addItem() {
//:创建新内容
//->创建tr对象
var varTR = document.createElement("tr");
//->创建td对象
var varTD1 = document.createElement("td");
varTD1.innerHTML = ++count;
//->td添加input对象
var varTD2 = document.createElement("td");
var varInput2 = document.createElement("input");
varInput2.setAttribute("type","text");
varTD2.appendChild(varInput2);
var varTD3 = document.createElement("td");
var varInput3 = document.createElement("input");
varInput3.setAttribute("type","password");
varTD3.appendChild(varInput3);
//把td添加到tr中
varTR.appendChild(varTD1);
varTR.appendChild(varTD2);
varTR.appendChild(varTD3);
//：把新内容添加到tbody中
//->拿到tbody标签
var varTbody = document.getElementsByTagName("tbody")[0];
//->插入tbody中
varTbody.appendChild(varTR);
}
function delItem() {
if (count <=1)
return;
//拿到tbody标签对象
var varTbody = document.getElementsByTagName("tbody")[0];
var lastObj = varTbody.lastChild;
varTbody.removeChild(lastObj);
count--;
}
</script>
</body>
属性方法练习.gif
