<!DOCTYPE html>
<html>
<head>
<title>Phương thức createElement() đến phần tử trong JavaScript</title>
</head>
<body>
<h1>Phương thức createElement() đến phần tử trong JavaScript</h1>
<p>Phương thức createElement() trong JavaScript dùng để tạo một phần tử HTML, sau đó bạn có thể chèn nội dung chữ và HTML vào phần tử mới tạo, rồi dùng phần tử đó thêm vào thẻ HTML khác, ở ví dụ này tạo phần tử HTML và thêm nội dung vào thẻ HTML đó, sau đó thêm thẻ vừa tạo vào một thẻ khác:</p>
<div id="divid" style="border:1px solid red;padding:20px">
</div>
<p>Nhấn vào nút TẠO VÀ THÊM để tạo thẻ p và thêm vào.</p>
<button onclick="taoVaThem()">TẠO VÀ THÊM</button>
<script>
function taoVaThem() {
// Tạo phần tử HTML P
const thep = document.createElement("p");
// Thêm nội dung vào thẻ P bằng innerHTML, có thẻ dùng innerText, createTextNode kết hợp appendChild
thep.innerHTML = "Nội dung thẻ P";
// Thêm thẻ P vừa tạo vào thẻ DIV bằng appendChild, có thể dùng append, before
document.getElementById("divid").appendChild(thep);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Phương thức createElement() đến phần tử trong JavaScript</title>
</head>
<body>
<h1>Phương thức createElement() đến phần tử trong JavaScript</h1>
<p>Phương thức createElement() trong JavaScript dùng để tạo một phần tử HTML, sau đó bạn có thể chèn nội dung chữ và HTML vào phần tử mới tạo, rồi dùng phần tử đó thêm vào thẻ HTML khác, ở ví dụ này tạo phần tử HTML và thêm nội dung vào thẻ HTML đó, sau đó thêm thẻ vừa tạo vào một thẻ khác:</p>
<div id="divid" style="border:1px solid red;padding:20px">
</div>
<p>Nhấn vào nút TẠO VÀ THÊM để tạo thẻ p và thêm vào.</p>
<button onclick="taoVaThem()">TẠO VÀ THÊM</button>
<script>
function taoVaThem() {
// Tạo phần tử HTML P
const thep = document.createElement("p");
// Thêm nội dung vào thẻ P bằng innerHTML, có thẻ dùng innerText, createTextNode kết hợp appendChild
thep.innerHTML = "Nội dung thẻ P";
// Thêm thẻ P vừa tạo vào thẻ DIV bằng appendChild, có thể dùng append, before
document.getElementById("divid").appendChild(thep);
}
</script>
</body>
</html>
