Phương thức insertAdjacentElement afterbegin trong JavaScript

Trình soạn thảo - Phương thức insertAdjacentElement afterbegin trong JavaScript

Kết quả - Phương thức insertAdjacentElement afterbegin trong JavaScript

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Phương thức insertAdjacentElement afterbegin trong JavaScript</title>
</head>
<body>

<h1>Phương thức insertAdjacentElement afterbegin trong JavaScript</h1>

<p>Di chuyển một phần tử HTML lên trước các phần tử con của một phần tử HTML khác hoặc chèn một nút phần tử lên trước các phần tử con của một phần tử HTML khác:</p>

<div id="divid" style="border:1px solid #ddd; padding:10px">
    <p>Thẻ p 1</p>
    <p>Thẻ p 2</p>
    <p>Thẻ p 3</p>
</div>
<p id="pchen" style="color:blue">Chèn thẻ này lên trước các phần tử con khung thẻ p</p>
<p>Click DI CHUYỂN để di chuyển dòng chữ màu xanh lên trước các phần tử con khung thẻ p</p>
<button onclick="diChuyen()">DI CHUYỂN</button>
<button onclick="chenNut()">CHÈN NÚT</button>
<p>Click CHÈN NÚT để chèn nút phần tử h2 mới tạo trước các phần tử con khung thẻ p</p>
<script>
function diChuyen() {
  // Lấy phần tử div id divid
  const divid = document.getElementById("divid");
  // Lấy phần tử p id pchen
  const pchen = document.getElementById("pchen");
  // Di chuyển phần tử pchen lên trước các phần tử con của thẻ div có id divid
  divid.insertAdjacentElement("afterbegin", pchen);
}
function chenNut() {
   // Lấy phần tử div id divid	
  const divid = document.getElementById("divid");
  // Tạo nút phần tử h2
  const h2 = document.createElement('h2');
  h2.textContent = 'Thẻ h2';
  // Chèn nút phần tử h2 trước các phần tử con của thẻ div có id divid
  divid.insertAdjacentElement("afterbegin", h2);
}
</script>
</body>
</html>