HTML DOM에 새 요소를 추가하려면 , 먼저 생성한 다음 기존 요소에 추가해야 합니다.
따라야 할 단계
1) 먼저 div 섹션을 만듭니다.
태그
2) 요소 만들기
3) document.createTextNode()를 사용하여 텍스트 만들기 , 위에서 생성한 element("p")에 삽입하도록 합니다.
4) appendChild() 사용 생성된 요소를 텍스트와 함께 기존 div에 추가해 보세요. 태그.
따라서 새로운 요소가 생성되고(
) 기존 요소에 추가됩니다(
).
예시
다음 예에서 처음에는 div 섹션은 2개의 텍스트로 구성됩니다. 그러나 나중에 출력에 표시된 대로 텍스트가 하나 더 생성되어 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