DOM 엘리먼트를 추가하는 다양한 방법

노드 객체를 생성하는 방법

 

document.createElement('div')

 

div 엘리먼트 노드를 생성한다.

 

document.createTextNode('안녕하세요')

 

'안녕하세요'라는 텍스트 노드를 생성한다.

 

 

노드나 문자열을 추가하는 방법 

 

element.append(...node)

 

element의 자식으로 node(text node, element node)를 추가한다.

text node 대신 문자열을 바로 추가할 수도 있다.

자식의 제일 끝에 붙는다.

 

element.prepend(...node)

 

자식의 제일 앞에 붙는다.

 

element.before(...node)

 

element의 바로 앞에 붙는다.

 

element.after(...node)

 

element의 바로 뒤에 붙는다.

 

element.replaceWith(...node)

 

element를 node로 대체한다.

 

 

HTML 태그를 직접 입력해서 넣는 방법

 

element.insertAdjacentHTML('beforebegin', '<p>안녕하세요</p>')

 

태그의 시작 지점 앞에 추가.

위의 before와 대응한다.

 

element.insertAdjacentHTML('afterbegin', '<p>안녕하세요</p>')

 

태그의 시작 지점 뒤(= 첫 번째 자식)에 추가.

prepend와 대응한다.

 

element.insertAdjacentHTML('beforeend', '<p>안녕하세요</p>')

 

태그의 끝 지점 앞(= 마지막 자식)에 추가.

append와 대응한다.

 

element.insertAdjacentHTML('afterend', '<p>안녕하세요</p>')

 

태그의 끝 지점 뒤에 추가.

after와 대응한다.

 

 

노드를 복사하는 방법

 

element.cloneNode(true)

 

후손까지 모두 복사 된다.

 

element.cloneNode(false)

 

후손을 제외하고 자신만 복사 된다.

 

 

노드를 삭제하는 방법

 

element.remove()

 

참고 :

https://ko.javascript.info/modifying-document#ref-1256