[JavaScript] 요소 노드 추가/변경/삭제

innerHTML, outerHTML

innerHTML, outerHTML은 입력 받은 문자열을 요소로 만들어 HTML을 추가/변경이 가능하였다. 
하지만, 위의 방법은 기존의 내용을 삭제하고, 새롭게 할당된 값을 덮어 씌우는 방식이기 때문에 복구 해야 하는 상황이 생긴다면 기존의 내용을 다시 찾아서 넣어야 하는 문제가 발생하게 된다  

 

기존의 갖고 있던 내용을 삭제하지 않고 보존하기 위해서는 요소 노드를 추가하는 방법을 사용한다!!

 

➕ 요소 노드 추가

노드 추가의 동작 과정은 다음과 같다.

 

☝️요소 노드 만들기

document의 createElement() 메서드를 통해 원하는 태그를 가진 노드를 만든다.

let newNode = document.createElement( 태그명 );

 

✌️요소 노드 꾸미기

만든 노드의 내용을 추가하거나 createTextNode()를 이용해 텍스트 노드로 꾸미기가 가능하다. 

newNode.textContent = "나의 새로운 노드!"

 

👌요소 노드 추가하기

여러 개의 메서드를 이용해 원하는 위치로 만든 노드를 추가해준다. 

firstNode.before(newNode)

• prepend : 제일 첫 번째 자식 노드로 추가
• append : 제일 마지막 자식 노드로 추가
• before : 호출 노드의 앞에 추가
• after : 호출 노드의 뒤에 추가

- 입력 값으로는 전달하고나 하는 요소를 바로 넣을 수도 있다.

- 만약 여러 개를 한 번에 넣는다면, 넣는 순서대로 추가가 된다. 

 

➖ 요소 노드 삭제

만약 특정 노드를 삭제하고 싶다면 remove() 메서드를 사용한다. 

제거할 노드.remove();

 

 

⤴️ 요소 노드 이동

노드를 원하는 위치로 이동하고 싶다면 append() 메서드를 사용한다. 

원하는 위치의 노드.append(이동할 노드)