วิธีการ insertAdjacentElement

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

ไวยากรณ์

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

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

ให้องค์ประกอบอ้างอิงคือองค์ประกอบ #target มาแทรกย่อหน้าใหม่ก่อนหน้าองค์ประกอบนี้:

html<div id="target">
  <p>elem</p>
</div>

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);

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

html<p>!</p>
<div id="target">
  <p>elem</p>
</div>

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

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

html<div id="target">
  <p>elem</p>
</div>

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);

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

html<div id="target">
  <p>elem</p>
</div>
<p>!</p>

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

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

html<div id="target">
  <p>elem</p>
</div>

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);

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

html<div id="target">
  <p>!</p>
  <p>elem</p>
</div>

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

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

html<div id="target">
  <p>elem</p>
</div>

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);

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

html<div id="target">
  <p>elem</p>
  <p>!</p>
</div>

ดูเพิ่มเติม