Phương thức HTML DOM createElement()

Phương thức HTML DOM createElement() được dùng để tạo một phần tử HTML động bằng JavaScript. Nó nhận tên phần tử làm tham số và tạo nút phần tử đó. Bạn cần sử dụng phương thức appendChild() để có phần tử mới được tạo như một phần của DOM.

Cú pháp

Cú pháp sau đây dùng cho phương thức createElement():

document.createElement(nodename)

Ví dụ

Hãy xem một ví dụ cho phương thức createElement():

<!DOCTYPE html> <html> <body> <h1>Ví dụ createElement()</h1> <p>Nhấn nút bên dưới để tạo thêm nút</p> <button onclick="createButton()">TẠO</button> <br><br> <script> var i=0; function createButton() { i++; var btn = document.createElement("BUTTON"); btn.innerHTML = "NÚT" + i; var br = document.createElement("BR"); document.body.appendChild(btn); document.body.appendChild(br); } </script> </body> </html>

Kết quả

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

Khi nhấn nút TẠO ba lần. Một nhấp cho một nút:

Trong ví dụ trên:

Chúng ta đã tạo nút TẠO sẽ thực thi phương thức createButton() khi được nhấp bởi người dùng.

<button onclick="createButton()">TẠO</button>

Hàm createButton() tạo một phần tử <button> bằng phương thức createElement() của đối tượng document. Sử dụng innerHTML, chúng ta đặt văn bản sẽ được hiển thị trên đầu nút. Chúng ta tạo một phần tử khác <br> bằng phương thức createElement() của đối tượng document. Phần tử <button> và phần tử <br> sau đó được nối thêm vào thân tài liệu bằng phương thức appendChild():

var i=0; function createButton() { i++; var btn = document.createElement("BUTTON"); btn.innerHTML = "NÚT" + i; var br = document.createElement("BR"); document.body.appendChild(btn); document.body.appendChild(br); }