자바스크립트 - 문서 수정 메소드

자바스크립트 - 문서 수정 메소드

문서 수정

노드 생성

createElement()

태그 이름을 사용해 새로운 요소를 만드는 메소드

// p태그와 div 생성 let p = document.createElement("p"); let div = document.createElement("div"); // body에 넣기 let body = document.body; // prepend는 문서의 맨앞부분에 추가하는것인데 // 아직 배우지는않음 임시로 사용 body.prepend(div); body.prepend(p);

cloneNode(deep)

요소를 복사하는 메소드

deep == true 일경우 자손도 복사함

deep == false 일경우 자신만 복사함

리스트1 리스트2 let div = document.querySelector('.area'); let div1 = div.cloneNode(true); // 자손도 함께복사 let div2 = div.cloneNode(false); //자손복사 X 자신만복사 // .area 전에 삽입 div.before(div1); // .area 후에 삽입 div.after(div2);

노드 삽입

append(), prepend()

append() : node 끝에 노드나 문자열을 삽입

prepend() : node 앞에 노드나 문자열을 삽입

리스트1 리스트2 let liA = document.createElement('li'); liA.textContent = "추가한 리스트 1"; let liB = document.createElement('li'); liB.textContent = "추가한 리스트 2"; let ul = document.querySelector('ul'); // append 이용해 요소 맨앞에 삽입 ul.append(liA); ul.append("append 이용해서요소 삽입실습입니다."); // prepend 이용해 요소 맨뒤에 삽입 ul.prepend(liB); ul.prepend("prepend 이용해서 요소 삽입 실습니다.");

계속작성중입니다. 양이많네요 ..

728x90

from http://memory-develo.tistory.com/100 by ccl(A) rewrite - 2021-08-03 15:26:06