Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML DOM DL 개체

<시간/>

HTML DOM dl 개체는 HTML

요소와 연결됩니다.
요소는 설명 목록을 생성하기 위한 것입니다. dl 개체를 사용하면 JavaScript를 사용하여
요소를 동적으로 만들고 액세스할 수 있습니다.

구문

다음은 −

의 구문입니다.

설명 목록 만들기 -

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

예시

dl 객체에 대한 예를 살펴보겠습니다 -

<!DOCTYPE html>
<html>
<body>
<h2>Div object example</h2>
<p>Create a div by clicking the below button</p>
<button onclick="createDiv()">CREATE</button>
<script>
   function createDiv() {
      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>

출력

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

HTML DOM DL 개체

CREATE 버튼 클릭 시 -

<수프> HTML DOM DL 개체

위의 예에서 -

사용자가 클릭할 때 createDiv() 메서드를 실행하는 CREATE 버튼을 먼저 만들었습니다. 

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

createDiv() 메서드는 문서 개체의 createElement() 메서드를 사용하여

,
및
요소를 만들고 요소를 Desc, DesT 및 데이터 변수에 각각 할당합니다. 그런 다음 createTextNode() 메서드를 사용하여
및
요소에 대한 텍스트 노드를 만들고 appendChild() 메서드를 사용하여 해당 요소에 추가합니다.

마지막으로

요소를
에 추가한 다음
요소에 추가합니다. 그런 다음
요소는 appendChild() 메서드를 사용하여
및
요소와 함께 문서 본문에 추가됩니다. -

function createDiv() {
   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);
}