I envy the senior programmers who wrote these special effects. I want to learn, but I always don’t know how to think or use logic. Sometimes I am very anxious, but I am not afraid of these things. Fortunately, there are still people who teach me and give me guidance. This is why I am relatively lucky. But I can’t pass my level. My biggest shortcoming is that I avoid things. I give up if I don’t know how to do it. I don’t know how to do it anymore, and I don’t dare to ask. This big shortcoming must be corrected. The following are the learning techniques that Brother Yang taught me. My thinking is clear and my efficiency has been greatly improved. . No more nonsense, let’s get back to the topic:
Title: btton buttons one add and one delete. Clicking the add button will add a node, clicking the delete button will delete the last node, and the new element added will be deleted with one click.
Step 1: Analyze the idea and make preparations (the separation of structure, behavior and performance is the separation of html structure, js script, css style)
First of all: build the html structure, define the css style, and write basic scripts (because js script and html The structure is separate so).
js analysis: first two button's onclick event, and secondly, encapsulate addition and deletion into methods so that functions can be called for reuse.
window.onload = function() {
addBtn .onclick = function() {}
removeBtn.onclick = function() {}
}
Step 2: Write a creation method: Create a new node
function createEle() {
var newEle = document.createElement("div "); // Define a new element node variable
var newBtn = document.createElement("input"); // Define a new element node variable
var boxEle = document.getElementById ("boxcon");
//Find the element you want to add to it since it is the upper-level element. Here, use the id identifier to find it
newEle.className="con";//The attribute style assigned to the new element is written in css
newBtn.type ="button";
newBtn.value = " remove ";
boxEle.appendChild(newEle);//Add the new node to boxcon
}
Step 3: Write the deletion method: delete the element.
function removeEle(removeObj) {
removeObj.parentNode .removeChild(removeObj);
//Remove element
}
Step 4: Call function
window.onload = function() {
addBtn.onclick = function() {
createEle();
}
removeBtn.onclick = function() {
var box = document.getElementById("boxcon");
removeEle(box.lastChild);
}
}
Haha, it’s almost finished. Don’t worry, there is one more function. One last feature. . (New elements added will be deleted with one click)
over. . . Haha I still don’t quite understand the usage of this. . . It needs to be explored carefully in the future. . .
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
