Phương thức createElement() có class trong JavaScript
Phương thức createElement() có class trong JavaScript
Phương thức createElement() có class trong JavaScript
Tự code rồi chạy thử...
Chạy Thử
<!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>
<h1>Phương thức createElement() có class 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 nút phần tử sau đó thêm class và nút phần tử đó:</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 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>
<!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>
<h1>Phương thức createElement() có class 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 nút phần tử sau đó thêm class và nút phần tử đó:</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 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>
Phương thức createElement() có class trong JavaScript nằm trong bài viết Phương thức createElement() trong JavaScript