웹 프론트엔드 JS 튜토리얼 js_javascript 기술 초보자를 위한 새 노드 생성 및 삭제 단계

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" >&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)
}
} 🎜>

하하 이제 거의 다 끝났네요. 기능이 하나 더 있으니 걱정하지 마세요. 마지막 기능입니다. . (새로 추가된 요소는 한 번의 클릭으로 삭제됩니다)
오버. . . 하하 아직도 이 사용법이 잘 이해가 안 되네요. . . 앞으로는 주의깊게 살펴보아야 할 것이다. . .
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

inetpub 폴더를 삭제할 수 있나요? C 드라이브의 inetpub 폴더를 빠르게 삭제하는 방법 inetpub 폴더를 삭제할 수 있나요? C 드라이브의 inetpub 폴더를 빠르게 삭제하는 방법 Mar 13, 2024 pm 02:00 PM

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

Xiaohongshu 메모를 삭제하는 방법 Xiaohongshu 메모를 삭제하는 방법 Mar 21, 2024 pm 08:12 PM

Xiaohongshu 메모를 삭제하는 방법

어떤 폴더가 발견되었나요.000? found.000 폴더를 삭제할 수 있나요? 어떤 폴더가 발견되었나요.000? found.000 폴더를 삭제할 수 있나요? Mar 13, 2024 pm 08:52 PM

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

WeChat에서 차단 및 삭제되어 영구적으로 추가될 수 없다는 것이 사실인가요? WeChat에서 차단 및 삭제되어 영구적으로 추가될 수 없다는 것이 사실인가요? Apr 08, 2024 am 11:41 AM

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

Xiaohongshu 릴리스를 삭제하는 방법은 무엇입니까? 삭제 후 복구하는 방법은 무엇입니까? Xiaohongshu 릴리스를 삭제하는 방법은 무엇입니까? 삭제 후 복구하는 방법은 무엇입니까? Mar 21, 2024 pm 05:10 PM

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

hiberfil.sys 파일이란 무엇입니까? hiberfil.sys를 삭제할 수 있나요? hiberfil.sys 파일이란 무엇입니까? hiberfil.sys를 삭제할 수 있나요? Mar 15, 2024 am 09:49 AM

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

WeChat 파일 전송 도우미를 완전히 삭제하는 방법_WeChat 파일 전송 도우미를 닫는 방법 소개 WeChat 파일 전송 도우미를 완전히 삭제하는 방법_WeChat 파일 전송 도우미를 닫는 방법 소개 Mar 20, 2024 pm 08:31 PM

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

TikTok에서 다른 사람에게 파일을 보내는 방법은 무엇입니까? 다른 사람에게 보낸 파일을 삭제하는 방법은 무엇입니까? TikTok에서 다른 사람에게 파일을 보내는 방법은 무엇입니까? 다른 사람에게 보낸 파일을 삭제하는 방법은 무엇입니까? Mar 22, 2024 am 08:30 AM

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

See all articles