เมธอด before

เมธอด before เพิ่มข้อความก่อนองค์ประกอบที่กำหนด นอกจากนี้ยังมีเมธอด insertBefore, ซึ่งทำงานในลักษณะเดียวกัน

ไวยากรณ์

แทรกข้อความก่อนองค์ประกอบ:

javascript$(selector).before(text);

นี่คือวิธีที่ข้อความจะถูกเพิ่ม ก่อนองค์ประกอบที่เลือก ซึ่งจะถูกส่งกลับมา โดยฟังก์ชันที่ผู้ใช้กำหนด:

javascript$(selector).before(function(indexInSet));

อีกวิธีหนึ่งในการใช้งานฟังก์ชัน, พารามิเตอร์ที่สองกำหนดค่า html เดิมขององค์ประกอบ:

javascript$(selector).before(function(indexInSet, htmlString));

ข้อความอาจไม่เพียงแต่เป็นข้อความธรรมดา แต่ยังสามารถเป็นองค์ประกอบ DOM หรือวัตถุ jQuery ได้อีกด้วย ในกรณีนี้องค์ประกอบเหล่านี้จะถูกย้าย จากตำแหน่งเดิมในโค้ด HTML

ตัวอย่าง

มาแทรกข้อความก่อนย่อหน้าที่กำหนด:

html<p id="test">text</p>

javascript$('#test').before('!!!');

โค้ด HTML จะมีลักษณะดังนี้:

html!!!<p id="test">text</p>

ตัวอย่าง

มาแทรกข้อความพร้อมแท็กก่อนย่อหน้าที่กำหนด:

html<p id="test">text</p>

javascript$('#test').before('<p>!!!</p>');

โค้ด HTML จะมีลักษณะดังนี้:

html<p>!!!</p><p id="test">text</p>

ตัวอย่าง

ลองวางย่อหน้าหนึ่งไว้เหนืออีกย่อหน้า (นั่นคือ ตัดย่อหน้าออกจากตำแหน่งเดิมและวาง ในตำแหน่งใหม่):

html<p id="p1">text1</p>
<p id="p2">text2</p>

javascript$('#p2').before('#p1');

โค้ด HTML จะมีลักษณะดังนี้:

html<p id="p2">text2</p>
<p id="p1">text1</p>

ดูเพิ่มเติม