06/04/2021, 14:48
Hàm document.createElement() trong Javascript - Javascript Function
Code RUN <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> div { color: black; margin: 10px 0px; text-align: center; ...
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 Zaidap.com.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: Zaidap.com.net
