createElement 및 appendChild
Coddy의 JavaScript DOM 메서드 코스 레슨 — 13개 중 12번째.
createElement() 함수는 지정된 태그 이름(예: div, p, span)을 가진 새로운 HTML 요소를 생성합니다. 예를 들어:
const newElement = document.createElement("p");appendChild() 함수는 지정된 자식 요소를 다른 요소의 마지막 자식으로 삽입합니다. 이를 통해 웹 페이지 콘텐츠의 계층 구조를 구축하고 수정할 수 있습니다. 예를 들어:
const childElement = document.createElement("p");
childElement.textContent = "This is a new child element.";
parentElement.appendChild(childElement);위의 예제에서는 새로운 p 요소를 생성하고 이를 parentElement 요소 내부에 추가합니다.
챌린지
쉬움ID가 myList인 순서 없는 목록(unordered list)이 포함된 HTML 코드가 주어집니다.
JavaScript만 사용하여, 순서 없는 목록에 다른 목록 항목(list item)을 추가하고 "Dog"라는 텍스트를 추가하세요.
직접 해보기
<!DOCTYPE html>
<html>
<body>
<ul id="animals">
<li>Cow</li>
<li>Ant</li>
<li>Bear</li>
<li>Camel</li>
</ul>
<script src="script.js"></script>
</body>
</html>