<!DOCTYPE html>
<html>
<head>
<title>Phương thức before() phần tử html trong JavaScript</title>
</head>
<body>
<h1>Phương thức before() phần tử html trong JavaScript</h1>
<p>Phương thức before() trong JavaScript dùng để thêm chữ vào phía trước phần tử HTML hoặc thêm phần tử html vào trước phần tử HTML khác, ở ví dụ này mình thêm phần tử html vào phía trước phần tử HTML khác:</p>
<div id="divid" style="border: 1px solid red; padding:20px">Thêm phần tử HTML vào trước ô này!</div>
<p>Nhấn vào nút THÊM để thêm phần tử h2 vào trước ô đỏ</p>
<button onclick="themPhanTu()">THÊM</button>
<script>
function themPhanTu() {
const divid = document.getElementById("divid");
// Tạo phần tử h2
const h2 = document.createElement("h2");
// Thêm phần tử h2 vào trước phần tử có id divid
divid.before(h2);
// Thêm chữ vào phần tử h2
h2.append("Tiêu đề h2");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Phương thức before() phần tử html trong JavaScript</title>
</head>
<body>
<h1>Phương thức before() phần tử html trong JavaScript</h1>
<p>Phương thức before() trong JavaScript dùng để thêm chữ vào phía trước phần tử HTML hoặc thêm phần tử html vào trước phần tử HTML khác, ở ví dụ này mình thêm phần tử html vào phía trước phần tử HTML khác:</p>
<div id="divid" style="border: 1px solid red; padding:20px">Thêm phần tử HTML vào trước ô này!</div>
<p>Nhấn vào nút THÊM để thêm phần tử h2 vào trước ô đỏ</p>
<button onclick="themPhanTu()">THÊM</button>
<script>
function themPhanTu() {
const divid = document.getElementById("divid");
// Tạo phần tử h2
const h2 = document.createElement("h2");
// Thêm phần tử h2 vào trước phần tử có id divid
divid.before(h2);
// Thêm chữ vào phần tử h2
h2.append("Tiêu đề h2");
}
</script>
</body>
</html>
