Đối tượng HTML DOM dl

Đối tượng dl trong HTML DOM đại diện cho phần tử <dl> (description list - danh sách mô tả). Phần tử này dùng để tạo danh sách các cặp thuật ngữ - mô tả. Bạn có thể tạo và truy xuất động phần tử <dl> bằng JavaScript.

Cú pháp

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

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

Ví dụ

Ví dụ tạo động một danh sách mô tả chứa thuật ngữ "Xoài" và mô tả đi kèm:

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

Kết quả

Ban đầu chỉ có tiêu đề, đoạn văn và nút "TẠO".

Sau khi nhấn nút, xuất hiện danh sách mô tả 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 createDL().
• Hàm tạo <dl>, <dt>, <dd> bằng createElement().
• Tạo nút văn bản cho <dt> và <dd>, gắn bằng appendChild().
• Gắn <dt> và <dd> vào <dl>, sau đó gắn <dl> vào body.