[DOM] JavaScript를 사용하여 HTML 요소 앞/뒤에 요소 추가하기

요소 선택

먼저,JavaScript를 사용하여 HTML 요소를 선택해야 합니다. 아래 코드는 class=two를 가진 <li> 태그와 추가할 요소를 선택합니다.

let liTag = document.querySelector(".two");
let movingTag = document.querySelector(".movingTag"); // 이동할 요소

요소 앞/뒤에 추가

선택한 요소의 앞 또는 뒤에 다른 요소를 추가하려면 brfore 및 after 메서드를 사용합니다. 아래 코드는 litag 요소 앞에 movigTag 요소를 추가하고 그 후 litag 뒤에도 movingTag 요소를 추가합니다.

liTag.before(movingTag); // 선택한 요소 앞에 추가
liTag.after(movingTag); // 선택한 요소 뒤에 추가

이러한 방식으로 JavaScript를 사용하여 HTML 요소(태그) 앞/뒤에 접근하고 내용을 가져올 수 있으며, 웹 페이지의 요소 간의 관계를 조작할 때 유용하게 활용할