提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JavaScript动态改变HTML页面元素例如添加或删除

JavaScriptHTML 删除 添加 动态 页面 改变 元素
2023-06-13 09:15:41 时间

可以通过JavaScript动态的改变HTML中的元素

向HTML中添加元素

首先需要创建一个标签，然后向该标签中添加相应的内容，然后将创建好的标签添加到相应的位置。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>测试文档</title>
<scripttype="text/javascript">
functionadd(){
varelement=document.createElement("p");
varnode=document.createTextNode("添加新段落");
element.appendChild(node);
x=document.getElementById("demo");
x.appendChild(element);
}
</script>
</head>
<body>
<divid="demo">
<p>这是第一段</p>
</div>
<inputtype="button"value="按钮"onclick="add()"/>
</body>
</html>

删除HTML中的某个元素

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>测试文档</title>
<scripttype="text/javascript">
functiondeleteE(){
varfather=document.getElementById("demo");
varchild=document.getElementById("p1");
father.removeChild(child);
}
</script>
</head>
<body>
<divid="demo">
<pid="p1">这是第一段</p>
<pid="p2">这是第二段</p>
</div>
<inputtype="button"value="删除"onclick="deleteE()"/>
</body>
</html>

相关文章