Đối tượng HTML DOM div

Đối tượng div đại diện cho phần tử HTML <div> - phần tử khối chung dùng để nhóm các phần tử lại với nhau nhằm áp dụng kiểu dáng (CSS) hoặc thao tác nhóm dưới một tên/thẻ duy nhất.

Thuộc tính

Cú pháp

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

var divElement = document.createElement("DIV");

Ví dụ

Ví dụ tạo động một <div> có nội dung và kiểu dáng:

<!DOCTYPE html>
<html>
<body>
<h2>Ví dụ đối tượng div</h2>
<p>Nhấn nút TẠO để tạo phần tử div có nội dung và kiểu dáng</p>
<button onclick="createDiv()">TẠO</button>
<script>
  function createDiv() {
    var d = document.createElement("DIV");
    var txt = document.createTextNode("Phần tử Div mẫu");
    d.setAttribute("style", "margin:10px;width:200px;background-color:lightgreen;border:2px solid blue");
    d.appendChild(txt);
    document.body.appendChild(d);
  }
</script>
</body>
</html>

Kết quả

Sau khi nhấn nút "TẠO", một hộp div màu xanh nhạt, viền xanh, chiều rộng 200px, chứa chữ "Phần tử Div mẫu" xuất hiện ở cuối trang.

Giải thích

• Nút "TẠO" gọi hàm createDiv().
• Hàm tạo <div>, gán vào biến d.
• Tạo nút văn bản "Phần tử Div mẫu", gán vào biến txt.
• Dùng setAttribute() để đặt style inline cho div.
• Gắn nút văn bản vào div, sau đó gắn div vào body tài liệu.