HTML DOM에 새 요소 추가하기
HTML DOM에 새로운 요소를 추가하려면 두 단계를 거쳐야 합니다. 먼저 createElement()로 요소를 생성한 다음, appendChild()를 사용해 기존 요소에 연결하는 것입니다. 요소를 생성만 하고 문서에 추가하지 않으면 화면에는 아무것도 나타나지 않습니다.
따라야 할 단계
- 먼저 <div> 섹션을 만들고 <p> 태그를 이용해 텍스트를 넣습니다.
- document.createElement("p") 메서드를 사용해 새로운 <p> 요소를 생성합니다.
- document.createTextNode() 메서드로 텍스트 노드를 만들어, 앞서 생성한 <p> 요소 안에 담습니다.
- appendChild() 메서드를 사용해 텍스트가 포함된 새 요소를 기존 <div> 태그에 추가합니다.
이 과정을 거치면 새 요소(<p>)가 생성되어 기존 요소(<div>)에 성공적으로 추가됩니다.
예제
다음 예제에서는 처음에 <div> 섹션에 두 개의 텍스트만 존재합니다. 하지만 스크립트가 실행되면 세 번째 텍스트가 새로 생성되어 div 섹션에 추가되는 것을 실행 결과에서 확인할 수 있습니다.
<html>
<body>
<div id="new">
<p id="p1">Tutorix</p>
<p id="p2">Tutorialspoint</p>
</div>
<script>
var tag = document.createElement("p");
var text = document.createTextNode("Tutorix is the best e-learning platform");
tag.appendChild(text);
var element = document.getElementById("new");
element.appendChild(tag);
</script>
</body>
</html>실행 결과
Tutorix Tutorialspoint Tutorix is the best e-learning platform
참고 사항
appendChild()는 항상 부모 요소의 마지막 자식으로 새 요소를 추가합니다. 만약 특정 위치에 요소를 삽입하고 싶다면 insertBefore() 메서드를 사용하거나, HTML 문자열 형태로 간편하게 추가할 수 있는 insertAdjacentHTML()을 활용하는 방법도 있습니다.