วิธีการ insertAdjacentHTML

วิธีการ insertAdjacentHTML ช่วยให้ สามารถแทรกสตริงของโค้ด HTML ไปยังตำแหน่งใดก็ได้บนหน้าเว็บ โค้ดจะถูกแทรกโดยสัมพัทธ์กับ องค์ประกอบหลัก (anchor element) สามารถทำการแทรกก่อน องค์ประกอบหลัก (วิธีการแทรก 'beforeBegin') หลังจากองค์ประกอบหลัก (วิธีการแทรก 'afterEnd') หรือภายในองค์ประกอบหลัก คือที่จุดเริ่มต้น (วิธีการแทรก 'afterBegin') หรือที่จุดสิ้นสุด (วิธีการแทรก 'beforeEnd') ขององค์ประกอบหลัก

ไวยากรณ์

องค์ประกอบหลัก.insertAdjacentHTML(วิธีการแทรก, โค้ดสำหรับแทรก);

ตัวอย่าง . วิธีการ beforeBegin

กำหนดให้องค์ประกอบหลักคือองค์ประกอบ #target มาแทรกย่อหน้าใหม่ไว้ข้างหน้าองค์ประกอบนี้:

<div id="target">
	<p>องค์ประกอบ</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('beforeBegin', '<p>!</p>');

ผลลัพธ์ของการทำงานโค้ด:

<p>!</p>
<div id="target">
	<p>องค์ประกอบ</p>
</div>

ตัวอย่าง . วิธีการ afterEnd

คราวนี้มาแทรกย่อหน้าใหม่ไว้หลังองค์ประกอบหลัก:

<div id="target">
	<p>องค์ประกอบ</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('afterEnd', '<p>!</p>');

ผลลัพธ์ของการทำงานโค้ด:

<div id="target">
	<p>องค์ประกอบ</p>
</div>
<p>!</p>

ตัวอย่าง . วิธีการ afterBegin

มาแทรกย่อหน้าใหม่ไว้ที่จุดเริ่มต้นขององค์ประกอบหลัก:

<div id="target">
	<p>องค์ประกอบ</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('afterBegin', '<p>!</p>');

ผลลัพธ์ของการทำงานโค้ด:

<div id="target">
	<p>!</p>
	<p>องค์ประกอบ</p>
</div>

ตัวอย่าง . วิธีการ beforeEnd

มาแทรกย่อหน้าใหม่ไว้ที่จุดสิ้นสุดขององค์ประกอบหลัก:

<div id="target">
	<p>องค์ประกอบ</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('beforeEnd', '<p>!</p>');

ผลลัพธ์ของการทำงานโค้ด:

<div id="target">
	<p>องค์ประกอบ</p>
	<p>!</p>
</div>

ดูเพิ่มเติม

วิธีการ insertAdjacentText,
ซึ่งใช้แทรกข้อความลงในตำแหน่งที่กำหนด
วิธีการ insertAdjacentElement,
ซึ่งใช้แทรกองค์ประกอบลงในตำแหน่งที่กำหนด
วิธีการ prepend,
ซึ่งใช้แทรกองค์ประกอบที่จุดเริ่มต้น
วิธีการ append,
ซึ่งใช้แทรกองค์ประกอบที่จุดสิ้นสุด
วิธีการ appendChild,
ซึ่งใช้แทรกองค์ประกอบที่จุดสิ้นสุดขององค์ประกอบแม่
วิธีการ insertBefore,
ซึ่งใช้แทรกองค์ประกอบไว้หน้าองค์ประกอบอื่น