วิธี prepend

วิธี prepend เพิ่มข้อความที่ส่วนต้น ขององค์ประกอบ นอกจากนี้ยังมีวิธี prependTo, ที่ทำงานในลักษณะเดียวกัน

ไวยากรณ์

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

javascript$(ตัวเลือก).prepend(ข้อความ);

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

javascript$(ตัวเลือก).prepend(function(หมายเลขในเซต, เนื้อหาปัจจุบันขององค์ประกอบ));

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

ตัวอย่าง

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

html<p id="test">ข้อความ</p>
javascript$('#test').prepend('!!!');

โค้ด HTML จะกลายเป็นดังนี้:

html<p id="test">!!!ข้อความ</p>

ตัวอย่าง

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

html<p id="test">ข้อความ</p>
javascript$('#test').prepend('<b>!!!</b>');

โค้ด HTML จะกลายเป็นดังนี้:

html<p id="test"><b>!!!</b>ข้อความ</p>

ตัวอย่าง

ลองค้นหาย่อหน้าทั้งหมดและที่ส่วนต้นของแต่ละ ย่อหน้าให้ใส่หมายเลขลำดับของมันในเซต:

html<p>ข้อความ</p>
<p>ข้อความ</p>
<p>ข้อความ</p>
<p>ข้อความ</p>
<p>ข้อความ</p>
javascript$('p').prepend(function(index, text) {
  return index;
});

โค้ด HTML จะกลายเป็นดังนี้:

html<p>0ข้อความ</p>
<p>1ข้อความ</p>
<p>2ข้อความ</p>
<p>3ข้อความ</p>
<p>4ข้อความ</p>

ดูเพิ่มเติม

  • วิธี prependTo,
    ซึ่งเพิ่มข้อความที่ส่วนต้นขององค์ประกอบ
  • วิธี append, before, after,
    ที่ช่วยให้เพิ่มเนื้อหาในตำแหน่งที่กำหนดได้
  • องค์ประกอบเทียม before,
    ซึ่งเพิ่มข้อความที่ส่วนท้ายขององค์ประกอบด้วย CSS