JavaScript动态添加或者删除HTML元素
分类：实例代码
JavaScript动态添加或者删除HTML元素属于前端实例代码，有关更多实例代码大家可以查看。
web中，JavaScript是用来操作dom元素的，删除和添加dom元素是最为基本的操作。
下面通过代码实例介绍一下如何添加或者删除指定的元素。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script type="text/javascript">
function add(){
var element=document.createElement("p");
var node=document.createTextNode("前端教程网二");
element.appendChild(node);
obox= document.getElementById("box");
obox.appendChild(element);
}
window.onload=function(){
var obt=document.getElementById("bt");
obt.onclick=function(){
add()
}
}
</script>
</head>
<body>
<div id="box">
<p>前端教程网一</p>
</div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>
点击按钮可以动态创建一个p元素，然后再向这个节点添加文本，最后将其添加到box元素中。
相关阅读：
（1）.createElement方法参阅JavaScript createElement()一章节。
（2）.createTextNode方法参阅document.createTextNode()一章节。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script type="text/javascript">
function add(){
var element=document.createElement("p");
var node=document.createTextNode("前端教程网二");
var obox= document.getElementById("box");
element.appendChild(node);
obox.appendChild(element);
}
window.onload=function(){
var obt=document.getElementById("bt");
var odelete=document.getElementById("delete");
var obox= document.getElementById("box");
obt.onclick=function(){
add()
}
odelete.onclick=function(){
var obox= document.getElementById("box");
var ps=obox.getElementsByTagName("p");
obox.removeChild(ps[0]);
}
}
removeChild
</script>
</head>
<body>
<div id="box">
<p>前端教程网一</p>
</div>
<input type="button" id="bt" value="添加元素"/>
<input type="button" id="delete" value="删除元素"/>
</body>
</html>
上面的代码可以删除第一个p元素。
removeChild方法可以参阅JavaScript removeChild()一章节。
JavaScript动态添加或者删除HTML元素，这样的场景在实际项目中还是用的比较多的，关于JavaScript动态添加或者删除HTML元素就介绍到这了。