Phương thức insertAdjacentElement afterend trong JavaScript

Phương thức insertAdjacentElement afterend trong JavaScript

Phương thức insertAdjacentElement afterend trong JavaScript

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Phương thức insertAdjacentElement afterend trong JavaScript</title>
</head>
<body>
<div id="divid" style="color:blue">
	Di chuyển thẻ này lên sau h1
</div>
<h1 id="h1id" style="color:red">H1- Phương thức insertAdjacentElement afterend trong JavaScript</h1>
<p>Di chuyển một phần tử HTML ra sau một phần tử HTML khác hoặc chèn một nút phần tử ra sau một phần tử HTML khác:</p>
<p>Click DI CHUYỂN để di chuyển dòng chữ xanh lên sau h1</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 sau thẻ h1</p>
<script>
function diChuyen() {
  // Lấy phần tử div id divid
  const divid = document.getElementById("divid");
  // Lấy phần tử h1 id h1id
  const h1id = document.getElementById("h1id");
  // Di chuyển phần tử phần tử div id divid lên sau h1
  h1id.insertAdjacentElement("afterend", divid);
}
function chenNut() {
    // Lấy phần tử h1 id h1id
  const h1id = document.getElementById("h1id");
  // 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 sau thẻ h1
  h1id.insertAdjacentElement("afterend", h2);
}
</script>
</body>
</html>
Phương thức insertAdjacentElement afterend trong JavaScript nằm trong bài viết Phương thức insertAdjacentElement trong JavaScript