DOM 요소 삭제하기
DOM에서 요소를 삭제하려면 두 가지를 기억하면 된다.
1. 삭제할 요소를 선택하고 2. 그 요소를 삭제한다.
- 삭제할 요소 선택
<body>
<h1 id="first-title">hi!</h1>
<p>I'm new!</p>
<p class="highlight">
this is a
<a id="link" class="highlight" href="#">link</a>
</p>
</body>에서 h1태그를 삭제하려고 할 때, 여러 가지 방법이 있다. ID로 선택하거나 querySelector를 사용하는 등.
let firstH1 = document.querySelector('h1');- 요소 삭제
선택한 요소를 삭제하려면 remove메서드를 사용하거나
firstH1.remove();parentElement로 부모요소를 선택하여 removeChild메서드를 사용하는 방식이 있다.
firstH1.parentElement.removeChild(firstH1);첫 번째 방식은 구식 버전의 브라우저에서는 작동하지 않기 때문에 이전 버전까지의 호환성을 생각해야 한다면 두 번째 방법을 사용하자.
DOM 요소 이동시키기
요소를 이동시키려면 이동할 요소의 부모 요소를 선택한 뒤 append나 insertBefore를 사용하여 이동할 요소를 이동시키면 된다.
<body>
<h1 id="first-title">hi!</h1>
<p>I'm new!</p>
<p class="highlight">
this is a
<a id="link" class="highlight" href="#">link</a>
</p>
</body><p>태그 간의 위치를 바꾸려면
let firstParagraph = document.querySelector('p');
firstParagraph.parentElement.append(firstParagraph);가 끝이다.
이동할 요소를 선택한 뒤 그것의 부모 요소에 append를 적용하여 이동할 요소를 다시 넣어주면 된다. 이때 브라우저는 자동으로 원래 있던 p요소를 삭제하고, append를 적용했으므로 body의 가장 마지막에 p를 삽입한다.
원하는 위치에 요소를 넣고 싶다면 조금만 응용하면 될 듯하다.
공부 정리용 블로그