Web API---DOM---元素相关的操作方法
程序员文章站
2023-02-06 11:09:54
1. 追加子元素 my$("dv").appendChild(obj); 2. 把新的子元素插入到第一个子元素的前面 my$("dv").insertBefore(obj, my$("dv").firstElementChild); 3. 移除父级元素中第一个子级元素 my$("btn2").onc ......
1. 追加子元素
my$("dv").appendchild(obj);
2. 把新的子元素插入到第一个子元素的前面
my$("dv").insertbefore(obj, my$("dv").firstelementchild);
3. 移除父级元素中第一个子级元素
my$("btn2").onclick = function () { //移除父级元素中第一个子级元素 my$("dv").removechild(my$("dv").firstelementchild); };
4. 点击按钮删除div中所有的子级元素,先判断父级元素中有没有第一个子元素
my$("btn3").onclick = function () { //点击按钮删除div中所有的子级元素 //判断父级元素中有没有第一个子元素 while (my$("dv").firstelementchild) { my$("dv").removechild(my$("dv").firstelementchild); }
综合案例:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <style> div { width: 200px; height: 200px; border: 1px solid pink; } </style> </head> <body> <input type="button" value="显示效果" id="btn" /> <input type="button" value="干掉第一个子元素" id="btn2" /> <input type="button" value="干掉所有子元素" id="btn3" /> <div id="dv"></div> <script src="common.js"></script> <script> var i = 0; my$("btn").onclick = function () { i++; var obj = document.createelement("input"); obj.type = "button"; obj.value = "按钮" + i; //my$("dv").appendchild(obj);//追加子元素 //把新的子元素插入到第一个子元素的前面 my$("dv").insertbefore(obj, my$("dv").firstelementchild); //my$("dv").replacechild();---自己玩 }; my$("btn2").onclick = function () { //移除父级元素中第一个子级元素 my$("dv").removechild(my$("dv").firstelementchild); }; my$("btn3").onclick = function () { //点击按钮删除div中所有的子级元素 //判断父级元素中有没有第一个子元素 while (my$("dv").firstelementchild) { my$("dv").removechild(my$("dv").firstelementchild); } }; </script> </body> </html>
如果只创建一个元素,如何操作?
有则删除----->先判断有没有,有就删除,然后再创建
有则删除,无则创建 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <input type="button" value="显示效果" id="btn" /> <div id="dv"></div> <script src="common.js"></script> <script> //有则删除,无则创建 //先判断有没有,有就删除,然后再创建 my$("btn").onclick = function () { //判断,div中有没有这个按钮,有就删除 //判断这个按钮的子元素是否存在 if (my$("btn2")) {//如果为true就有 my$("dv").removechild(my$("btn2")); } var obj = document.createelement("input"); obj.type = "button"; obj.value = "按钮"; obj.id = "btn2"; my$("dv").appendchild(obj); }; </script> </body> </html>
反之:无则创建,如下:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <input type="button" value="显示效果" id="btn" /> <div id="dv"></div> <script src="common.js"></script> <script> my$("btn").onclick = function () { //判断这个按钮的子元素是否存在 if (!my$("btn2")) {//如果为true就有 var obj = document.createelement("input"); obj.type = "button"; obj.value = "按钮"; obj.id = "btn2"; my$("dv").appendchild(obj); } }; </script> </body> </html>
推荐阅读
-
Selenium元素的常用操作方法分析
-
Web API---DOM---总结获取元素的方式
-
JAVA WEB快速入门之从编写一个基于SpringBoot+Mybatis快速创建的REST API项目了解SpringBoot、SpringMVC REST API、Mybatis等相关知识
-
DWR3 访问WEB元素的两种方法实例详解
-
Web API---DOM---元素相关的操作方法
-
Web前端 css实现元素垂直居中的常用方法
-
jQuery替换节点元素的操作方法
-
python下如何让web元素的生成更简单的分析
-
【工具相关】Web-ionic-npm的安装
-
原生JavaScript来实现对dom元素class的操作方法(推荐)