JavaScript动态改变HTML页面元素例如添加或删除
可以通过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>