js_javascript 기술 초보자를 위한 새 노드 생성 및 삭제 단계
May 16, 2016 pm 06:05 PM이런 특수효과를 쓴 선배 프로그래머들이 부럽습니다. 배우고 싶지만 생각하는 방법이나 논리를 사용하는 방법을 항상 모릅니다. 가끔은 너무 불안하기도 하지만 이런 것들이 두렵지 않아요. 다행히 아직 저를 가르쳐주시고 지도해주시는 분들이 있어서 비교적 운이 좋은 편이에요. 하지만 제 레벨을 통과하지 못하는 게 가장 큰 단점은 어떻게 해야 할지 모르면 포기하고, 감히 하지 못한다는 것입니다. 묻다. 이런 큰 단점은 바로잡아야 합니다. 다음은 양 형제님이 저에게 가르쳐주신 학습 기술입니다. 제 생각은 명확해졌고 효율성도 크게 향상되었습니다. . 더 이상 말도 안되는 주제로 돌아가 보겠습니다.
제목: 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" >< ;/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
}
RemoveObj.parentNode .removeChild(removeObj);
//요소 제거
}
addBtn.onclick = function() {
createEle() ;
}
removeBtn.onclick = function() {
var box = document.getElementById("boxcon")
removeEle(box.lastChild)
}
} 🎜>
하하 이제 거의 다 끝났네요. 기능이 하나 더 있으니 걱정하지 마세요. 마지막 기능입니다. . (새로 추가된 요소는 한 번의 클릭으로 삭제됩니다)

인기 기사

인기 기사

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











inetpub 폴더를 삭제할 수 있나요? C 드라이브의 inetpub 폴더를 빠르게 삭제하는 방법

어떤 폴더가 발견되었나요.000? found.000 폴더를 삭제할 수 있나요?

WeChat에서 차단 및 삭제되어 영구적으로 추가될 수 없다는 것이 사실인가요?

Xiaohongshu 릴리스를 삭제하는 방법은 무엇입니까? 삭제 후 복구하는 방법은 무엇입니까?

hiberfil.sys 파일이란 무엇입니까? hiberfil.sys를 삭제할 수 있나요?

WeChat 파일 전송 도우미를 완전히 삭제하는 방법_WeChat 파일 전송 도우미를 닫는 방법 소개

TikTok에서 다른 사람에게 파일을 보내는 방법은 무엇입니까? 다른 사람에게 보낸 파일을 삭제하는 방법은 무엇입니까?
