您好,欢迎访问一九零五行业门户网

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

这篇文章主要介绍了关于javascript动态改变html页面元素例如添加或删除,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
html页面元素可以通过js动态改变,比如可以向html中添加元素或删除某个元素,下面为示例代码,感兴趣的朋友不要错过
可以通过javascript动态的改变html中的元素
向html中添加元素
首先需要创建一个标签,然后向该标签中添加相应的内容,然后将创建好的标签添加到相应的位置。
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>测试文档</title> <script type="text/javascript"> function add(){ var element = document.createelement("p"); var node = document.createtextnode("添加新段落"); element.appendchild(node); x = document.getelementbyid("demo"); x.appendchild(element); } </script> </head> <body> <p id="demo"> <p>这是第一段</p> </p> <input type="button" value="按钮" onclick="add()" /> </body> </html>
删除html中的某个元素
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>测试文档</title> <script type="text/javascript"> function deletee(){ var father = document.getelementbyid("demo"); var child = document.getelementbyid("p1"); father.removechild(child); } </script> </head> <body> <p id="demo"> <p id="p1">这是第一段</p> <p id="p2">这是第二段</p> </p> <input type="button" value="删除" onclick="deletee()" /> </body> </html>
相关推荐:
javascript 计时事件的了解与使用方法
javascript动态添加li元素
javascript动态创建html标记的方法实例总结
以上就是javascript动态改变html页面元素例如添加或删除的详细内容。
其它类似信息

推荐信息