js_javascript 기술 초보자를 위한 새 노드 생성 및 삭제 단계

이런 특수효과를 쓴 선배 프로그래머들이 부럽습니다. 배우고 싶지만 생각하는 방법이나 논리를 사용하는 방법을 항상 모릅니다. 가끔은 너무 불안하기도 하지만 이런 것들이 두렵지 않아요. 다행히 아직 저를 가르쳐주시고 지도해주시는 분들이 있어서 비교적 운이 좋은 편이에요. 하지만 제 레벨을 통과하지 못하는 게 가장 큰 단점은 어떻게 해야 할지 모르면 포기하고, 감히 하지 못한다는 것입니다. 묻다. 이런 큰 단점은 바로잡아야 합니다. 다음은 양 형제님이 저에게 가르쳐주신 학습 기술입니다. 제 생각은 명확해졌고 효율성도 크게 향상되었습니다. . 더 이상 말도 안되는 주제로 돌아가 보겠습니다.
제목: btton 버튼 하나는 추가하고 하나는 삭제합니다. 추가 버튼을 클릭하면 노드가 추가되고, 삭제 버튼을 클릭하면 마지막 노드가 삭제되며, 추가된 새 요소는 다음과 같습니다. 한 번의 클릭으로 삭제됩니다.
1단계: 아이디어 분석 및 준비(구조, 동작, 성능의 분리는 html 구조, js 스크립트, css 스타일의 분리)
우선 html 구조 구축, CSS 스타일 정의 , 기본 스크립트를 작성합니다(js 스크립트와 html 구조가 분리되어 있으므로).

코드 복사 코드는 다음과 같습니다.

<div class="btns"> ;
<input type="button" value="Add" id="addBtn"></input>
<input type="button" value="제거" id="removeBtn" >&lt ;/input>
</div>
<div class="box" id="boxcon"></div>

js 분석: 처음 두 버튼의 onclick 이벤트, 두 번째로 추가 및 삭제를 메소드로 캡슐화하여 재사용을 위해 함수를 호출할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

window.onload = function() {
addBtn .onclick = function() {}
removeBtn.onclick = function() {}
}

2단계: 생성 방법 작성: 새 노드 생성

코드 복사 코드는 다음과 같습니다.

function createEle() {
var newEle = document.createElement("div "); // 새 요소 노드 변수 정의
var newBtn = document.createElement("input") // 새 요소 노드 변수 정의
var boxEle = document.getElementById ( "boxcon");//상위 요소이므로 추가하려는 요소를 찾습니다. 여기서는 id 식별자를 사용하여 찾습니다.
newEle.className="con";// 새 요소에 할당된 속성 스타일은 css
newBtn.type ="button";
newBtn.value = "remove "
boxEle.appendChild(newEle);//새 노드 추가에 작성됩니다. to boxcon
}

3단계: 삭제 방법 작성: 요소를 삭제합니다.

코드 복사 코드는 다음과 같습니다.

function RemoveEle(removeObj) {
RemoveObj.parentNode .removeChild(removeObj);
//요소 제거
}

4단계: 함수 호출

복사 code 코드는 다음과 같습니다.

window.onload = function() {
addBtn.onclick = function() {
createEle() ;
}
removeBtn.onclick = function() {
var box = document.getElementById("boxcon")
removeEle(box.lastChild)
}
} 🎜>

하하 이제 거의 다 끝났네요. 기능이 하나 더 있으니 걱정하지 마세요. 마지막 기능입니다. . (새로 추가된 요소는 한 번의 클릭으로 삭제됩니다)

오버. . . 하하 아직도 이 사용법이 잘 이해가 안 되네요. . . 앞으로는 주의깊게 살펴보아야 할 것이다. . .