Bùi Tấn Lực - 129
- 13/09/2025
Bùi Tấn Lực 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, chi tiết như nào hãy cùng chúng tôi phân tích:
Phương thức createElement() trong JavaScript
Chức năng của Phương thức createElement() trong JavaScript
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.
Cú pháp của Phương thức createElement() trong JavaScript
const phantu = document.createElement("tenphantu");
tenphantu: Tên phần tử HTML cần tạo.
phantu: Trả về một phần tử, bạn có thể chèn nội dung chữ và HTML vào phần tử này và dùng phần tử này thêm vào phần tử khác.
Code Phương thức createElement() trong JavaScript
Phương thức createElement() đến phần tử trong JavaScript
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:
const thep = document.createElement("p");
<div id="divid">
<h1>Tạo và thêm phần tử HTML vào đây!</h1>
</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>
Phương thức createElement() đến body trong JavaScript
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 body:
const thep = document.createElement("p");
<h1>Tạo và thêm phần tử HTML vào body!</h1>
<p>Nhấn vào nút TẠO VÀ THÊM để tạo thẻ p và thêm vào body.</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 append, có thể dùng appendChild, before
document.body.append(thep);
}
</script>
Phương thức createElement() có class trong JavaScript
Tạo nút phần tử sau đó thêm class và nút phần tử đó:
const thep = document.createElement("p");
<!DOCTYPE html>
<html>
<head>
<title>Phương thức createElement() có class trong JavaScript</title>
<style>
.pfont{font-size:30px}
.pcolor{color:red}
.pweight{font-weight:bold}
</style>
</head>
<body>
<div id="divid">
<h1>Tạo và thêm phần tử HTML có class vào đây!</h1>
</div>
<p>Nhấn vào nút TẠO VÀ THÊM để tạo thẻ p có class 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 class pfont vào nút phần tử thep
thep.classList.add("pfont");
// Thêm class pcolor và class pweight vào nút phần tử thep
thep.classList.add("pcolor", "pweight");
// Thêm nội dung vào thẻ P bằng innerText, có thẻ dùng innerHTML, createTextNode kết hợp appendChild
thep.innerText = "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>
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Phương thức createElement() trong JavaScript.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
