요약: 삽입, 대체, 제거
DOM 요소를 생성, 삽입, 교체, 제거하는 방법에는 여러 가지가 있습니다. 다음은 사용 가능한 방법에 대한 요약입니다.
브라우저 지원에 대해서는 제공된 링크와 강의 후반부에 있는 "브라우저 지원" 모듈을 확인하십시오.
생성 & 삽입
크게 두 가지 방법이 있습니다. HTML 스니펫(예: innerHTML을 통해)을 유효한 HTML 스니펫에 제공하고 브라우저가 이를 렌더링하도록 하거나 JS 코드로 DOM 객체를 생성한 후 수동으로 추가/삽입합니다. 후자의 접근 방식은 DOM 객체에 직접 접근할 수 있다는 장점이 있습니다(프로퍼티를 설정하거나 이벤트 리스너를 추가하는 데 유용). 단점은 더 많은 코드를 작성해야 한다는 겁니다.
HTML 코드 추가하기.
const root = document.getElementById('root-el'); // selects something like
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
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
element)
const root = document.getElementById('root-el'); // selects something like
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의 요소를 아래의 두 가지 방법으로 교체할 수 있습니다.
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()를 사용하는 것을 고려해 보세요.
제거
아래의 세 가지 방법으로 요소를 제거할 수 있습니다:
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!' 내용의 텍스트 노드를 생성하고 삽입합니다.
기존에 있는 텍스트를 추가하고 싶으신가요?
아래의 코드를 쓰면 됩니다.
