Phương thức appendChild() node p trong JavaScript
Phương thức appendChild() node p trong JavaScript
Phương thức appendChild() node p trong JavaScript
Tự code rồi chạy thử...
Chạy Thử
<!DOCTYPE html>
<html>
<head>
<title>Phương thức appendChild() node p trong JavaScript</title>
</head>
<body>
<h1>Phương thức appendChild() node p trong JavaScript</h1>
<p>Dùng để thêm một node (nút) phần tử HTML vào một thẻ HTML khác, nút được thêm vào là cuối thẻ, ngoài ra còn có thể di chuyển phần tử html từ thẻ này sang thẻ khác, ở ví dụ này mình thêm một node (nút) phần tử html p vào cuối div:</p>
<div id="divid" style="border:1px solid red;padding:15px">Thêm node p vào đây</div>
<p>Click vào nút THÊM NODE để thêm một node (nút) phần tử html p vào cuối div</p>
<button onclick="themNode()">THÊM NODE</button>
<script>
function themNode() {
// Tạo node (nút) p
const node = document.createElement("p");
// Tạo nút văn bản
const textnode = document.createTextNode("Nội dung thẻ p");
// Thêm nút văn bản vào nút phần tử html
node.appendChild(textnode);
// Thêm nút phần tử HTML vào cuối div
document.getElementById("divid").appendChild(node);
// Thêm nút phần tử HTML vào cuối body (nếu không thêm vào div thì thử thêm vào body)
/// document.body.appendChild(node);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Phương thức appendChild() node p trong JavaScript</title>
</head>
<body>
<h1>Phương thức appendChild() node p trong JavaScript</h1>
<p>Dùng để thêm một node (nút) phần tử HTML vào một thẻ HTML khác, nút được thêm vào là cuối thẻ, ngoài ra còn có thể di chuyển phần tử html từ thẻ này sang thẻ khác, ở ví dụ này mình thêm một node (nút) phần tử html p vào cuối div:</p>
<div id="divid" style="border:1px solid red;padding:15px">Thêm node p vào đây</div>
<p>Click vào nút THÊM NODE để thêm một node (nút) phần tử html p vào cuối div</p>
<button onclick="themNode()">THÊM NODE</button>
<script>
function themNode() {
// Tạo node (nút) p
const node = document.createElement("p");
// Tạo nút văn bản
const textnode = document.createTextNode("Nội dung thẻ p");
// Thêm nút văn bản vào nút phần tử html
node.appendChild(textnode);
// Thêm nút phần tử HTML vào cuối div
document.getElementById("divid").appendChild(node);
// Thêm nút phần tử HTML vào cuối body (nếu không thêm vào div thì thử thêm vào body)
/// document.body.appendChild(node);
}
</script>
</body>
</html>
Phương thức appendChild() node p trong JavaScript nằm trong bài viết Phương thức appendChild() trong JavaScript