แทรก Element ที่ระบุในตำแหน่งที่ระบุใน JavaScript

JavaScript มี "insertAdjacentElement()" แทรก Element ที่มีอยู่แล้วในตำแหน่งที่ระบุ หากมีหลาย Elements ชื่อเดียวกัน ใช้ Indexes เข้าถึงเหมือน Array Elements

Syntax

node.insertAdjacentHTML(position, element);

ตัวอย่างที่ 1

ในตัวอย่างนี้ มี 3 Elements แบบขนาน คือ span1, span2, และ header ใช้ insertAdjacentElement() วาง span1 ใต้ Header ตาม Output

<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>

ผลลัพธ์

My span2 My Header My span1

ตัวอย่างที่ 2

ในตัวอย่างนี้ มี 3 Elements แบบขนาน span1, span2, และ header ใช้ insertAdjacentElement() วาง span2 ใต้ Header ตาม Output หากมีหลาย Elements เข้าถึงเหมือน Array ด้วย Indexes

<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>

ผลลัพธ์

My span1 My Header My span2