Đối tượng HTML DOM DT

Đối tượng DT trong HTML DOM đại diện cho phần tử HTML <dt> (description term - thuật ngữ mô tả). Bạn có thể tạo động phần tử <dt> bằng JavaScript thông qua đối tượng này.

Cú pháp

Tạo đối tượng DT:

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

Ví dụ

Ví dụ sau tạo một danh sách mô tả (<dl>) chứa thuật ngữ (<dt>) và mô tả (<dd>) khi nhấn nút:

<!DOCTYPE html>
<html>
<body>
<h2>Ví dụ đối tượng DT</h2>
<p>Nhấn nút bên dưới để tạo phần tử DT bên trong DL</p>
<button onclick="createDT()">TẠO</button>
<script>
  function createDT() {
    var dl = document.createElement("DL");
    var dt = document.createElement("DT");
    var termText = document.createTextNode("Xoài");
    dt.appendChild(termText);
    var dd = document.createElement("DD");
    var descText = document.createTextNode("Xoài là vua của các loại trái cây");
    dd.appendChild(descText);
    document.body.appendChild(dl);
    dl.appendChild(dt);
    dl.appendChild(dd);
  }
</script>
</body>
</html>

Kết quả

Ban đầu chỉ hiển thị tiêu đề, đoạn văn và nút "TẠO".

Sau khi nhấn nút "TẠO", một danh sách mô tả xuất hiện với thuật ngữ "Xoài" và mô tả "Xoài là vua của các loại trái cây".

Giải thích

• Nút "TẠO" gọi hàm createDT() khi được nhấn.
• Hàm tạo lần lượt các phần tử <dl>, <dt>, <dd> bằng document.createElement().
• Tạo nút văn bản (createTextNode()) cho <dt> và <dd>, sau đó gắn vào các phần tử tương ứng bằng appendChild().
• Cuối cùng gắn <dt> và <dd> vào <dl>, rồi gắn <dl> vào body tài liệu.