Chèn element vào vị trí xác định trong JavaScript

JavaScript cung cấp insertAdjacentElement() chèn element đã có vào vị trí chỉ định. Nếu nhiều element trùng tên, dùng index như array.

Cú pháp

targetElement.insertAdjacentElement(position, element);

Vị trí hợp lệ: beforebegin, afterbegin, beforeend, afterend.

Ví dụ 1: Chèn span[0] sau header (afterend)

<html> <body> <span>My span1</span> <span>My span2</span> <h2 id="H2">My Header</h2> <script> var s = document.getElementsByTagName("span")[0]; var h = document.getElementById("H2"); h.insertAdjacentElement("afterend", s); </script> </body> </html>

Kết quả

My span2 My Header My span1

Ví dụ 2: Chèn span[1] sau header

<html> <body> <span>My span1</span> <span>My span2</span> <h2 id="H2">My Header</h2> <script> var s = document.getElementsByTagName("span")[1]; var h = document.getElementById("H2"); h.insertAdjacentElement("afterend", s); </script> </body> </html>

Kết quả

My span1 My Header My span2

Vị trí insertAdjacentElement/HTML/Text:

• beforebegin: Trước element target
• afterbegin: Bên trong target, trước first child
• beforeend: Bên trong target, sau last child
• afterend: Sau element target