JavaScript append 사용법 및 예시
JavaScript append란?
JavaScript append()는 특정 요소나 텍스트를 HTML 문서에 추가하는 메서드입니다. 이 메서드를 사용하여 기존 요소에 새로운 내용을 동적으로 추가하거나 생성한 요소를 문서에 삽입할 수 있습니다. 추가된 내용은 기존 내용 뒤에 추가됩니다.
사용법
append() 메서드는 jQuery와 함께 사용할 수도 있지만, 여기서는 일반 JavaScript로 사용하는 방법에 초점을 맞출 것입니다.
1. 기존 요소에 내용 추가하기
기존 요소에 내용을 추가하려면, 추가하고자 하는 요소를 선택해야 합니다. 일반적으로 요소를 선택하기 위해 getElementById(), getElementsByClassName(), getElementsByTagName() 등의 메서드를 사용합니다.
예를 들어, 아래와 같이 HTML에 id="container"인 요소가 있다고 가정해봅시다.
<div id="container">
<p>기존 내용입니다.</p>
</div>
JavaScript의 getElementById()를 사용하여 해당 요소를 선택하고, append()를 호출해 새로운 내용을 추가할 수 있습니다.
let container = document.getElementById("container");
let newContent = document.createElement("p");
newContent.textContent = "추가 내용입니다.";
container.append(newContent);위의 예제에서는 기존 <p> 요소 내에 "추가 내용입니다."라는 텍스트가 추가되었습니다.
만약 여러 요소를 선택하고 모든 요소에 동일한 내용을 추가하려면, querySelectorAll() 메서드를 사용하여 일치하는 모든 요소를 선택한 후 반복문을 통해 내용을 추가할 수 있습니다.
let paragraphs = document.querySelectorAll("p");
let newContent = document.createElement("span");
newContent.textContent = "추가 내용입니다.";
paragraphs.forEach(paragraph => {
paragraph.append(newContent.cloneNode(true));
});위의 예제는 모든 <p> 요소에 새로운 <span> 요소와 그 내용을 추가합니다.
2. 요소를 동적으로 생성하여 추가하기
새로운 요소를 생성하고 문서에 추가하기 위해서는 createElement() 메서드를 사용합니다. 그런 다음, 생성한 요소의 내용을 설정한 후 append()를 호출하여 문서에 추가합니다.
let container = document.getElementById("container");
let newElement = document.createElement("div");
newElement.textContent = "새로운 요소입니다.";
container.append(newElement);위의 예제는 기존 id="container"인 요소에 새로운 <div> 요소를 추가합니다.
동적으로 요소를 생성하고 추가할 수 있으므로, 예를 들어 버튼을 클릭했을 때 새로운 요소를 추가하는 등의 상호작용적인 동작을 구현할 수 있습니다.
요약
JavaScript의 append() 메서드를 사용하면 기존 요소에 내용을 추가하거나, 동적으로 요소를 생성하여 문서에 추가할 수 있습니다. append() 메서드를 활용하면 웹 페이지를 동적으로 업데이트하거나 상호작용을 구현하는 것이 가능해집니다.