Computer >> Máy Tính >  >> Lập trình >> HTML

Đối tượng dl HTML DOM

Đối tượng dl HTML DOM được liên kết với phần tử HTML

. Phần tử
dùng để tạo danh sách mô tả. Bằng cách sử dụng đối tượng dl, chúng ta có thể tạo động và sử dụng phần tử
bằng JavaScript.

Cú pháp

Sau đây là cú pháp cho -

Tạo danh sách mô tả - 

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

Ví dụ

Chúng ta hãy xem một ví dụ cho đối tượng 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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Đối tượng dl HTML DOM

Khi nhấp vào nút TẠO -

Đối tượng dl HTML DOM

Trong ví dụ trên -

Đầu tiên chúng tôi đã tạo một nút CREATE sẽ thực thi phương thức createDiv () khi được người dùng nhấp vào - 

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

Phương thức createDiv () tạo một phần tử

,
và
bằng cách sử dụng phương thức createElement () của đối tượng tài liệu và đánh giá các phần tử tương ứng với các biến Desc, DesT và dữ liệu. Sau đó, chúng tôi tạo nút văn bản cho phần tử
và
bằng phương thức createTextNode () và nối chúng vào các phần tử tương ứng bằng phương thức appendChild ().

Cuối cùng, chúng ta nối phần tử

vào
và sau đó là phần tử
. Sau đó, phần tử
được nối cùng với phần tử
và
vào phần thân tài liệu bằng phương thức 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);
}