在JavaScript中可以对HTML中的元素进行增加或者删除
添加:
- 首先我们必须先创建该元素
使用document.createElement(),传入元素名即可创建,可使用var类型接收然后对该标签进行设置。 - 然后将其追加到已有元素
appendChild()方法
使用父元素的对象调用appendChild()方法,传入需要添加的元素,可把元素添加到父元素最后面
insertBefore()方法
传入2个参数,可添加到父元素中某个元素的前面,参数1:所添加的元素,参数2:哪个元素前面
删除:
- 删除某个 HTML 元素,您需要知晓该元素的父元素:
然后使用父元素调用removeChild(),传入要删除元素的对象即可删除
示例:
使用这几个方法我们可以实现页面提交附件增加与删除的效果,如上图。
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function add(){
// 获取需要添加或删除的父元素
var tr=document.getElementById("tr");
//创建一个新的<br>元素
var br=document.createElement("br");
//创建一个新的<input>元素
var file=document.createElement("input");
file.type="file";
//创建一个新的<button>素并添加点击事件
var remove=document.createElement("button");
remove.type="button";
remove.style.marginTop="5px";
remove.innerHTML="删除";
remove.addEventListener('click',function(){
//移除元素
tr.removeChild(remove);
tr.removeChild(file);
tr.removeChild(br);
})
//把创建的元素添加
tr.appendChild(br);
tr.appendChild(file);
tr.appendChild(remove);
}
</script>
</head>
<body>
<form action="#" enctype="multipart/form-data" method="post">
<table border="1" cellspacing="0" cellpadding="10">
<tr><th colspan="2">文件提交</th></tr>
<tr>
<td align="center">文件</td>
<td id="tr">
<input type="file" />
<input id="more" type="button" value="更多文件" onclick="add()"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</form>
</body>
</html>