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