HTML DOM DT 객체 – 자바스크립트로 <dt> 요소를 동적으로 생성하는 방법

HTML DOM의 DT 객체는 HTML <dt> 요소와 연결된 인터페이스입니다. 이 객체를 활용하면 자바스크립트를 통해 <dt>(정의 용어) 요소를 동적으로 생성하고 조작할 수 있습니다.

문법(Syntax)

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

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

위 코드에서 document.createElement() 메서드에 태그 이름 "DT"를 전달하면, 브라우저가 새로운 <dt> 요소 노드를 만들어 반환합니다.

예제(Example)

다음은 HTML DOM DT 객체를 사용해 버튼 클릭 시 정의 목록(DL) 안에 <dt> 요소를 동적으로 추가하는 예제입니다.

<!DOCTYPE html>
<html>
<body>
<h2>DT 객체 예제</h2>
<p>아래 버튼을 클릭하면 DL 내부에 DT 요소가 생성됩니다</p>
<button onclick="createDT()">CREATE</button>
<script>
    function createDT() {
        var Desc = document.createElement("DL");
        var DesT = document.createElement("DT");
        var tn = document.createTextNode("Mango");
        DesT.appendChild(tn);
        var data = document.createElement("DD");
        var tn1 = document.createTextNode("Mango is the king of fruits");
        data.appendChild(tn1);
        document.body.appendChild(Desc);
        Desc.appendChild(DesT);
        Desc.appendChild(data);
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM DT 객체 – 자바스크립트로 dt 요소를 동적으로 생성하는 방법

CREATE 버튼을 클릭하면 아래와 같이 정의 목록이 동적으로 추가됩니다.

HTML DOM DT 객체 – 자바스크립트로 dt 요소를 동적으로 생성하는 방법

코드 상세 설명

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

1. 버튼 생성 및 이벤트 연결

먼저 사용자가 클릭하면 createDT() 함수를 실행하는 CREATE 버튼을 만듭니다.

<button onclick="createDT()">CREATE</button>

2. DL, DT, DD 요소 생성

createDT() 함수는 document 객체의 createElement() 메서드를 사용하여 <dl>, <dt>, <dd> 세 가지 요소를 생성한 뒤, 각각 변수 Desc, DesT, data에 할당합니다.

3. 텍스트 노드 추가

이어서 createTextNode() 메서드로 <dt>와 <dd> 요소에 들어갈 텍스트 노드를 만들고, appendChild() 메서드를 통해 각 요소에 자식 노드로 추가합니다.

4. 문서 본문에 요소 삽입

마지막으로 <dt> 요소와 <dd> 요소를 <dl> 요소에 차례로 추가한 후, 완성된 <dl> 전체를 appendChild() 메서드로 문서 본문(body)에 삽입합니다.

function createDT() {
    var Desc = document.createElement("DL");
    var DesT = document.createElement("DT");
    var tn = document.createTextNode("Mango");
    DesT.appendChild(tn);
    var data = document.createElement("DD");
    var tn1 = document.createTextNode("Mango is the king of fruits");
    data.appendChild(tn1);
    document.body.appendChild(Desc);
    Desc.appendChild(DesT);
    Desc.appendChild(data);
}

정리

HTML DOM DT 객체는 <dl>(정의 목록), <dt>(정의 용어), <dd>(정의 설명) 구조를 자바스크립트로 유연하게 구성할 수 있게 해줍니다. createElement(), createTextNode(), appendChild() 세 가지 핵심 메서드만 익히면 페이지를 새로고침하지 않고도 동적으로 콘텐츠를 추가할 수 있습니다.

HTML DOM DT 객체 – 자바스크립트로 요소를 동적으로 생성하는 방법