Hàm document.createElement() trong Javascript

Phương thức createElement() có chức năng tạo một node( hay một thẻ html) với tên node được xác định. Sau khi đã tạo node, ta có thể sử dụng phương thức createTextNode() để tạo nội dung văn bản và gán cho node đó. Cuối cùng sử dụng dụng phương thức element.appendChild() hoặc element.insertBefore() để gắn node vừa được tạo vào trang.

Cú pháp

Cú pháp: document.createElement(nodename)

Trong đó:

  • nodename là tên node sẽ được tạo. Ví dụ div, button, li .vv..

Cách sử dụng

Tạo thẻ div với nội dung tùy ý và thêm nó vào trang:

Code RUN
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div {
                color: black;
                margin: 10px 0px;
                text-align: center;
                background: red;
                width: 400px;
                height: 50px;
            }
        </style>
    <body>
        <h1>Học lập trình miễn phí tại freetuts.net</h1> 	
        
        <button onclick="myFunction()">Xem kết quả</button>
        <script>
        	function myFunction(){
                var div = document.createElement("div");
                var text = document.createTextNode("Đây là nội dung của thẻ div mới được tạo!");
                div.appendChild(text);
                document.body.appendChild(div);
			}
        </script>
    </body>
</html>

Mình có thêm một chút định dạng để các bạn dễ nhận ra sự thay đổi khi thể div được thêm vào.

Và đây là kết quả:

Tham khảo: w3schools.com

Nguồn: freetuts.net