HTML DOM DD 객체

<시간/>

HTML DOM DD 개체는 HTML 문서에서

요소와 연결됩니다.

구문

다음은 −

의 구문입니다.

DD 개체 생성 -

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

예시

HTML DOM DD 개체에 대한 예를 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<body>
<h2>dd object example</h2>
<p>Click the button below to create a dd element with some text in it</p>
<button onclick="create_dd()">CREATE</button><br><br>
<dl id="DL1">
<dt>Mango</dt>
</dl>
<script>
   function create_dd() {
      var d = document.createElement("DD");
      var txt = document.createTextNode("Mango is called the king of fruits.");
      d.appendChild(txt);
      var ele= document.getElementById("DL1");
      ele.appendChild(d);
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM DD 객체

CREATE 버튼 클릭 시 -

HTML DOM DD 객체

위의 예에서 -

ID가 "DL1"인 정의 목록을 만들었습니다. 내부에

요소가 있습니다 - <dl id="DL1"> <dt>Mango</dt> </dl> 그런 다음 사용자가 클릭할 때 create_dd() 메서드를 실행하는 CREATE 버튼을 만들었습니다. <button onclick="create_dd()">CREATE</button><br><br> create_dd() 메서드는 문서 객체의 createElement() 메서드를 사용하여

요소를 생성하고 이를 변수 d에 할당합니다. 그런 다음 createTextNode() 메서드를 사용하여 텍스트 노드를 만들고 변수 txt에 할당합니다. 텍스트 노드는 appendChild() 메서드를 사용하여

요소의 자식으로 추가됩니다.

텍스트 노드와 함께

요소는 다시 appendChild() 메서드를 사용하여 정의 목록의 자식으로 추가됩니다.

function create_dd() {
   var d = document.createElement("DD");
   var txt = document.createTextNode("Mango is called the king of fruits.");
   d.appendChild(txt);
   var ele= document.getElementById("DL1");
   ele.appendChild(d);
}