วิธีการ insertAdjacentElement
วิธีการ insertAdjacentElement ช่วยให้
สามารถแทรกองค์ประกอบเข้าไปที่ใดก็ได้บนหน้าเว็บ
ส่วนใหญ่มักใช้หลังจากสร้างองค์ประกอบ
ด้วย createElement
โค้ดจะถูกแทรกโดยสัมพันธ์กับ องค์ประกอบอ้างอิง
สามารถทำการแทรกก่อน
องค์ประกอบอ้างอิง (วิธีการแทรก beforeBegin)
หลังจากนั้น (วิธีการแทรก afterEnd)
รวมถึงที่จุดเริ่มต้น (วิธีการแทรก afterBegin)
หรือที่จุดสิ้นสุด (วิธีการแทรก beforeEnd)
ขององค์ประกอบอ้างอิง
ไวยากรณ์
องค์ประกอบอ้างอิง.insertAdjacentElement(วิธีการแทรก, โค้ดสำหรับแทรก);
ตัวอย่าง . วิธีการ beforeBegin
ให้องค์ประกอบอ้างอิงคือองค์ประกอบ #target
มาแทรกย่อหน้าใหม่ก่อนหน้าองค์ประกอบนี้:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
ผลลัพธ์การทำงานของโค้ด:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
ตัวอย่าง . วิธีการ afterEnd
และตอนนี้มาแทรกย่อหน้าใหม่หลังจากองค์ประกอบอ้างอิง:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
ผลลัพธ์การทำงานของโค้ด:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
ตัวอย่าง . วิธีการ afterBegin
มาแทรกย่อหน้าใหม่ที่จุดเริ่มต้นขององค์ประกอบอ้างอิง:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
ผลลัพธ์การทำงานของโค้ด:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
ตัวอย่าง . วิธีการ beforeEnd
มาแทรกย่อหน้าใหม่ที่จุดสิ้นสุดขององค์ประกอบอ้างอิง:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
ผลลัพธ์การทำงานของโค้ด:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
ดูเพิ่มเติม
-
วิธีการ
insertAdjacentHTML,
ซึ่งแทรกแท็กไปยังตำแหน่งที่กำหนด -
วิธีการ
insertAdjacentText,
ซึ่งแทรกข้อความไปยังตำแหน่งที่กำหนด -
วิธีการ
prepend,
ซึ่งแทรกองค์ประกอบที่จุดเริ่มต้น -
วิธีการ
append,
ซึ่งแทรกองค์ประกอบที่จุดสิ้นสุด -
วิธีการ
appendChild,
ซึ่งแทรกองค์ประกอบที่จุดสิ้นสุดของ parent -
วิธีการ
insertBefore,
ซึ่งแทรกองค์ประกอบก่อนหน้าองค์ประกอบอื่น
