javascript DOM 객체 생성, 삽입, 교체, 제거

DOM 요소를 생성, 삽입, 교체, 제거하는 방법에는 여러 가지가 있습니다.

다음은 사용 가능한 방법에 대한 요약입니다.

 

 

DOM 생성 & 삽입

크게 두 가지 방법이 있습니다.

HTML 스니펫(예: innerHTML을 통해)을 유효한 HTML 스니펫에 제공하고 브라우저가 이를 렌더링하도록 하거나 JS 코드로 DOM 객체를 생성한 후 수동으로 추가/삽입합니다.

후자의 접근 방식은 DOM 객체에 직접 접근할 수 있다는 장점이 있습니다. (프로퍼티를 설정하거나 이벤트 리스너를 추가하는 데 유용)

단점은 더 많은 코드를 작성해야 한다는 겁니다.

 

HTML 코드 추가하기

const root = document.getElementById('root-el'); // selects something like <div id="root-el">
root.innerHTML = `
    <div>
        <h2>Welcome!</h2>
        <p>This is all create & rendered automatically!</p>
    </div>
`;

 

중요한 참고 사항:  innerHTML을 사용하면 root에 있던 내용이 완전히 대체됩니다.

HTML 코드를 추가/삽입하려면 insertAdjacentHTML을 대신 사용할 수 있습니다. 

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

const root = document.getElementById('root-el'); // selects something like <div id="root-el">
root.insertAdjacentHTML('afterbegin', `
    <div>
        <h2>Welcome!</h2>
        <p>This is all create & rendered automatically!</p>
    </div>
`);

 

 

DOM 객체를 수동으로 생성, 삽입하기

const someParagraph = document.createElement('p'); // creates a "p" element (i.e. a <p> element)
const root = document.getElementById('root-el'); // selects something like <div id="root-el">
root.append(someParagraph);

이 예에서는 단락을 만들어 root에 추가합니다 - 이는 root의 끝에 삽입됨을 의미합니다(즉 root 내부에 있지만 다른 모든 하위 노드 이후에 추가됨).

 

삽입하는 메서드:

 append()  => https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append

브라우저 지원은 괜찮게 되는 편이지만 IE에서는   appendChild() 이 선호될 수 있습니다 =>  https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

 

 prepend()  => https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/prepend

브라우저 지원은 괜찮게 되는 편이지만 IE에서는  insertBefore() 이 선호될 수 있습니다 => https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore

 

 before() ,  after()  => https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/before & https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/after

 

브라우저를 지원하지만 IE와 Safari는 지원하지 않습니다.   insertBefore()  (https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore) or   insertAdjacentElement()  (https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement) as substitutes.

 

중요한 참고 사항 : (요소를 삽입하는 방법에 관계없이) 요소를 삽입할 때 이전에 이미 삽입한 경우 새 위치로 요소를 이동하게 됩니다.

복사되는 것이아닙니다( someElement.cloneNode(true) 로 요소를 복사할 수 있긴 합니다).

 

DOM 대체

DOM의 요소를 아래의 두 가지 방법으로 교체할 수 있습니다.

 

 replaceWith()  => https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/replaceWith

 

 replaceChild()  => https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild

 

  replaceWith() 는 조금 더 쉽게 쓸 수 있고 브라우저 지원도 적절합니다. 단, IE는 예외입니다. IE를 사용하신다면   replaceChild() replaceChild()를 사용하는 것을 고려해 보세요.

 

 

DOM 제거

아래의 세 가지 방법으로 요소를 제거할 수 있습니다:

 someElement.innerHTML = ''  =>  someElement 의 모든 HTML 내용을 지워 렌더링된 모든 객체를 제거합니다.

 

 someElement.remove()  => DOM에서 단일 요소(someElement)를 제거. (https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove)

 

브라우저 지원은 훌륭하지만 IE는 아닙니다. 대신 removeChild(다음을 참고)를 사용하세요.

 someElement.parentNode.removeChild(someElement)   => (호출하는 요소가 아닌) 제공된 자식 요소를 제거합니다. 광범위한 브라우저 지원을 제공하지만 더 많은 코드가 작성되어야 합니다.(https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild)

 

 

텍스트 노드는 어떨까요?

한 번에 텍스트 노드를 생성하고 삽입할 수 있습니다.

 

someElement.textContent = 'Hi there!';

위의 코드는 'Hi there!' 내용의 텍스트 노드를 생성하고 삽입합니다.

 

 

기존에 있는 텍스트를 추가하고 싶으신가요?

아래의 코드를 쓰면 됩니다.

someElement.textContent = someElement.textContent + 'More text!';

 

 

 

 

참고: Maximilian Schwarzmüller의 JavaScript 완벽 가이드