1. 添加新元素
<!doctype html> <html> <head> <meta charset="utf-8"> <title>动态添加新元素</title> </head> <body> <ul class="example"> <li class="child">coffee</li> <li class="child">tea</li> <li class="child">coffee</li> <li class="child">tea</li> </ul> <script> var child = document.getelementsbyclassname("child")[0]; var newchild = document.createelement("li"); var newtext = document.createtextnode("wine"); newchild.appendchild(newtext); child.appendchild(newchild) </script> </body> </html>
2.删除已有元素
给时光以生命
<!doctype html> <html> <head> <meta charset="utf-8"> <title>删除元素</title> <style> </style> </head> <body> <ul class="example"> <li class="child">coffee</li> <li class="child">tea</li> <li class="child">coffee</li> <li class="child">tea</li> </ul> <script> var parent = document.queryselectorall(".example")[0]; var child = document.queryselectorall(".child")[2]; document.writeln(child.innerhtml) parent.removechild(child); //第二种方法此行替换:child.parentnode.removechild(child); </script> </body> </html>
总结
以上所述是小编给大家介绍的原生js实现动态添加新元素、删除元素方法 使用指南,希望对大家有所帮助
如对本文有疑问, 点击进行留言回复!!
荐 超强的入门文章 !!! JavaScript 速成计划第二篇(杂项详解:JS操作HTML 与 CSS、异常、事件)!
教你搭建 nodejs+mongoose+Graphql+Vue+Typescript 框架(上)
【Nginx】如何为已安装的Nginx动态添加模块?看完我懂了!!
网友评论