Đối tượng div HTML DOM được liên kết với phần tử HTML
. Div là một phần tử cấp khối có mục đích chung cho phép chúng tôi nhóm các phần tử lại với nhau để áp dụng kiểu cho chúng hoặc để thao tác một nhóm các phần tử HTML dưới một tên thẻ hoặc id.
Thuộc tính
Sau đây là thuộc tính cho đối tượng div -
| Thuộc tính | Mô tả |
|---|---|
| Căn chỉnh | Để đặt hoặc trả về giá trị thuộc tính align của phần tử . Thuộc tính này không được hỗ trợ trong HTML5, hãy sử dụng css để căn chỉnh. |
Cú pháp
Sau đây là cú pháp cho -
Tạo đối tượng div -
var p = document.createElement("DIV"); Ví dụ
Hãy để chúng tôi xem xét một ví dụ cho đối tượng HTML DOM div -
<!DOCTYPE html>
<html>
<body>
<h2>Div object example</h2>
<p>click on the CREATE button to create a div element with some text in it.</p>
<button onclick="createDiv()">CREATE</button>
<script>
function createDiv() {
var d = document.createElement("DIV");
var txt = document.createTextNode("Sample Div element");
d.setAttribute("style", "margin:10px;width:200px;background-color: lightgreen;border:2px solid blue");
d.appendChild(txt);
document.body.appendChild(d);
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút TẠO -
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 người dùng nhấp vào -
<button onclick="createDiv()">CREATE</button>
Hàm createDiv () tạo một phần tử
và gán nó cho biến d. Sau đó, nó tạo một nút văn bản và gán nó cho biến txt. Sau đó, chúng tôi đặt các thuộc tính phần tử
bằng phương thức setAttribute (). Sau đó, nút văn bản được nối vào phần tử
bằng phương thức appendChild (). Sau đó, phần tử
cùng với nút văn bản được thêm vào dưới dạng phần tử con của nội dung tài liệu -
function createDiv() {
var d = document.createElement("DIV");
var txt = document.createTextNode("Sample Div element");
d.setAttribute("style", "margin:10px;width:200px;background-color: lightgreen;border:2px solid blue");
d.appendChild(txt);
document.body.appendChild(d);
}