จาวาสคริปต์ ได้จัดเตรียม "insertAdjacentElement() " เพื่อแทรกองค์ประกอบที่มีอยู่แล้วในตำแหน่งที่ระบุ หากมีหลายองค์ประกอบที่มีชื่อเดียวกันให้ใช้ดัชนีเพื่อเข้าถึงเมื่อเราเข้าถึงองค์ประกอบอาร์เรย์
ไวยากรณ์
node.insertAdjacentHTML(position, element);
ตัวอย่าง-1
ในตัวอย่างต่อไปนี้ จริงๆ แล้วมี 3 องค์ประกอบใน span1, span2 และ header แบบขนาน โดยใช้วิธี insertAdjacentElement() เราได้วางองค์ประกอบ span1 ใต้ส่วนหัวตามที่แสดงในผลลัพธ์
<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 องค์ประกอบ ในแบบคู่ขนาน span1, span2 และส่วนหัว . โดยใช้วิธี insertAdjacentElement() เราได้วางองค์ประกอบ span2 ใต้ส่วนหัวตามที่แสดงในผลลัพธ์ หากมีหลายองค์ประกอบเข้าถึงองค์ประกอบเช่นอาร์เรย์เข้าถึงผ่านดัชนี
<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
