DOM(Document Object Model)은 HTML, XML 및 SVG 문서의 프로그래밍적 표현입니다. 두 개 이상의 DOM 요소를 하나로 병합하기 위해 JavaScript를 사용해야 할 때가 있습니다. 이 글에서는 DOM 요소를 병합하는 여러 가지 방법을 알아보겠습니다.
내용
innerHTML을 사용한 요소 병합
innerHTML 속성을 사용하면 요소 내의 HTML을 가져오거나 설정할 수 있습니다. 이를 이용하여 두 개의 요소를 병합할 수 있습니다.
예를 들어, 다음과 같이 기존 요소에 새로운 HTML을 추가하여 요소를 병합할 수 있습니다.
<div id="container">
<p>첫 번째 문장</p>
</div>
let container = document.getElementById('container');
container.innerHTML += '<p>두 번째 문장</p>';
위 예제에서 innerHTML을 사용하여 기존 container 요소에 새로운 <p> 요소를 추가하여 두 요소를 하나로 병합했습니다.
appendChild와 removeChild를 사용한 요소 병합
appendChild와 removeChild 메서드를 사용하여 요소를 병합할 수 있습니다.
예를 들어, 다음과 같이 두 번째 요소를 첫 번째 요소의 자식으로 추가하여 요소를 병합할 수 있습니다.
let container = document.getElementById('container');
let newElement = document.createElement('p');
newElement.textContent = '두 번째 문장';
container.appendChild(newElement);
위 예제에서 appendChild를 사용하여 newElement 요소를 container 요소에 추가하여 두 요소를 병합했습니다.
cloneNode를 사용한 요소 병합
cloneNode 메서드를 사용하면 요소를 복제하고 복제본을 삽입할 수 있습니다.
예를 들어, 다음과 같이 요소를 복제하여 병합할 수 있습니다.
let originalElement = document.getElementById('original');
let clonedElement = originalElement.cloneNode(true);
document.getElementById('target').appendChild(clonedElement);
위 예제에서 cloneNode 메서드를 사용하여 originalElement를 복제한 다음, target 요소에 복제본을 삽입하여 두 요소를 병합했습니다.
이와 같이 JavaScript를 사용하여 DOM 요소를 병합할 수 있습니다. 필요에 따라 적절한 방법을 선택하여 요소를 병합하고 DOM을 유연하게 조작할 수 있습니다.