1. Append child elements
my$("dv").appendChild(obj);
2. Insert the new child element in front of the first child element
my$("dv").insertBefore(obj, my$("dv").firstElementChild);
3. Remove the first child element from the parent element
my$("btn2").onclick = function () {
//Remove the first child element from the parent element
my$("dv").removeChild(my$("dv").firstElementChild);
};
4. Click the button to delete all the child elements in the div, and first judge whether there is the first child element in the parent element
my$("btn3").onclick = function () {
//Click button to delete div All child elements in
//Determine whether there is the first child element in the parent element
while (my$("dv").firstElementChild) {
my$("dv").removeChild(my$("dv").firstElementChild);
}
Comprehensive case:
<!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="Display effect" id="btn" /> <input type="button" value="Kill the first child element" id="btn2" /> <input type="button" value="Kill all child elements" 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 = "Button" + i; //my$("dv").appendChild(obj);//Append child elements //Insert the new child element in front of the first child element my$("dv").insertBefore(obj, my$("dv").firstElementChild); //my$("dv").replaceChild();---Play yourself }; my$("btn2").onclick = function () { //Remove the first child element from the parent element my$("dv").removeChild(my$("dv").firstElementChild); }; my$("btn3").onclick = function () { //Click button to delete div All child elements in //Determine whether there is the first child element in the parent element while (my$("dv").firstElementChild) { my$("dv").removeChild(my$("dv").firstElementChild); } }; </script> </body> </html>
How to create only one element?
Delete if there is any - > judge if there is any, delete if there is, and then create
Yes, delete.,No creation <!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="Display effect" id="btn" /> <div id="dv"></div> <script src="common.js"></script> <script> //Yes, delete.,No creation //Let's see if there's any,Yes, delete it.,Then create my$("btn").onclick = function () { //judge,div Is this button in,Yes, delete it. //Determine whether the child element of this button exists if (my$("btn2")) {//If so true There are my$("dv").removeChild(my$("btn2")); } var obj = document.createElement("input"); obj.type = "button"; obj.value = "Button"; obj.id = "btn2"; my$("dv").appendChild(obj); }; </script> </body> </html>
Otherwise: none is created, as follows:
<!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="Display effect" id="btn" /> <div id="dv"></div> <script src="common.js"></script> <script> my$("btn").onclick = function () { //Determine whether the child element of this button exists if (!my$("btn2")) {//If so true There are var obj = document.createElement("input"); obj.type = "button"; obj.value = "Button"; obj.id = "btn2"; my$("dv").appendChild(obj); } }; </script> </body> </html>