[JS] DOM & EVENT #3 노드 생성, 추가, 복제, 삭제

 

1. 노드 수정 추가

- nodeValue를 이용해서 내용을 추가 수정할 수 있음 (text value만 사용 가능, 나머지는 null처리함)

-> ex) blueTextNode.nodeValue = '파랑'; -> blue -> 파랑으로 바뀜

 

2. innerHTML 

• 사용법) 마크업을 제대로 표현하고 싶을 때 사용  
  • -> EX) ul.innerHTML = '<li>RED</li>;
• 단점) 요소를 추가,제거 수정할때마다 다시 모든 html을 string으로 추가해야함
  • -> EX) ul.innerHTML = '<li>RED</li><li>BLUE</li>;

 

3. 노드 생성 

1) appendChild()

방법1) innerHTML 

1. 새로운 li 를 만듦 : const newLi = document.createElement('li'); 
2. 자식 텍스트 노드 붙이기 : newLi.innerHTML = 'green'; -> <li>green</li>
3. ul태그 안에 넣기 : ul.appendChild(newLi);

방법2) createTextNode

1. 새로운 li 만듦 : const newLi2 = document.createElement('li'); 
2. 새로운 텍스트 노드 만듦 : const newText = document.createTextNode('green');
3. li태그 안의 자식 텍스트 노드 붙이기 : newLi2 .appendChild(newText );
4. ul태그 안에 넣기 : ul.appendChild(newLi2);

 

2) insertBefore()

- 특정 노드 전에 삽입해라!

-> appendChile : 항상 지정한 부모 노드의 가장 마지막 자식으로 추가됨

-> 원하는 위치가 마지막이 아니라면 insertBefore을 쓰자 

-> ul.insertBefore(newLi3, red); : red 앞에 newLi3을 삽입해라는 뜻

 

4. 노드 복제

1) cloneNode() 

const newBlack = newLi3.cloneNode(); //인수로 boolean값만 받음 -> 노드 자신만 복제됨 (자식노드x)
ul.appendChild(newBlack); // <li></li> 태그만 출력

const newBlack2 = newLi3.cloneNode(true); //true로 설정하면 더 깊은 복제를 실행함 -> 자식노드까지 복제함
ul.appendChild(newBlack2); // <li>black</li> 으로 출력

 

5. 노드 삭제

1) removeChild() 

ul.removeChild(newBlack2);
ul.removeChild(ul.firstElementChild); // ul의 첫번째 자식요소노드 삭제
ul.removeChild(ul.lastElementChild); // ul의 마지막 자식요소노드 삭제

 

 

출처 : 코딩앙마