HTML DOM DD 객체 이해하기 – 정의 목록 설명 요소를 동적으로 생성하는 방법

HTML DOM DD 객체는 HTML 문서에서 <dl> 요소로 정의되는 정의 목록(Definition List) 내부에 위치하는 <dd> 요소와 연결된 객체입니다. 이 객체를 활용하면 JavaScript로 정의 목록의 설명 항목을 동적으로 생성하고 조작할 수 있습니다.

문법(Syntax)

DD 객체를 새로 생성하는 기본 문법은 다음과 같습니다.

var p = document.createElement("DD");

예제

아래 예제는 버튼을 클릭하면 정의 목록 안에 새로운 <dd> 요소를 동적으로 추가하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<body>
<h2>DD 객체 예제</h2>
<p>아래 버튼을 클릭하면 텍스트가 포함된 dd 요소가 생성됩니다.</p>
<button onclick="create_dd()">생성</button><br><br>
<dl id="DL1">
<dt>망고</dt>
</dl>
<script>
   function create_dd() {
      var d = document.createElement("DD");
      var txt = document.createTextNode("망고는 과일의 왕이라고 불립니다.");
      d.appendChild(txt);
      var ele = document.getElementById("DL1");
      ele.appendChild(d);
   }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM DD 객체 이해하기 – 정의 목록 설명 요소를 동적으로 생성하는 방법

『생성』 버튼을 클릭하면 아래와 같이 정의 목록에 새로운 설명 항목이 추가됩니다.

HTML DOM DD 객체 이해하기 – 정의 목록 설명 요소를 동적으로 생성하는 방법

코드 상세 설명

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

1. 정의 목록 생성

먼저 id가 "DL1"인 정의 목록을 만들고, 그 안에 용어를 나타내는 <dt> 요소를 포함시켰습니다.

<dl id="DL1">
<dt>망고</dt>
</dl>

2. 버튼으로 함수 실행

사용자가 클릭하면 create_dd() 함수를 호출하는 버튼을 배치했습니다.

<button onclick="create_dd()">생성</button><br><br>

3. create_dd() 함수의 동작 원리

create_dd() 함수는 먼저 document 객체의 createElement() 메서드를 사용하여 <dd> 요소를 생성하고 변수 d에 할당합니다. 이어서 createTextNode() 메서드로 텍스트 노드를 만들어 변수 txt에 저장한 뒤, appendChild() 메서드를 통해 해당 텍스트 노드를 <dd> 요소의 자식 노드로 추가합니다.

마지막으로 getElementById()로 정의 목록을 가져온 후, 다시 한번 appendChild() 메서드를 사용하여 텍스트가 포함된 <dd> 요소 전체를 정의 목록의 자식으로 추가합니다.

function create_dd() {
   var d = document.createElement("DD");
   var txt = document.createTextNode("망고는 과일의 왕이라고 불립니다.");
   d.appendChild(txt);
   var ele = document.getElementById("DL1");
   ele.appendChild(d);
}

이처럼 HTML DOM DD 객체를 활용하면 페이지를 새로고침하지 않고도 정의 목록에 설명 내용을 실시간으로 추가할 수 있어, 동적인 웹 콘텐츠 구성에 유용하게 사용됩니다.