ฉันจะเพิ่มองค์ประกอบหลังจากองค์ประกอบอื่นได้อย่างไร

174

ฉันมีกล่องข้อความและต้องการเพิ่ม div หลังจากนั้น ฉันได้ลองใช้.append()ฟังก์ชั่นแล้ว แต่นั่นเพิ่ม div ในองค์ประกอบ

ตัวอย่างเช่นฉันมี:

<input type="text" id="bla" />

และฉันต้องการเปลี่ยนสิ่งนั้นเป็น:

<input type="text" id="bla" /><div id="space"></div>

— skerit
แหล่งที่มา

287

ลองใช้after()วิธีการ:

$('#bla').after('<div id="space"></div>');

เอกสาร

— Rowan
แหล่งที่มา

8

กระบวนการ .after () และ. insertAfter () วิธีการทำงานเดียวกัน

— Rifat

7

ถูกต้อง แต่ขึ้นอยู่กับวิธีที่คุณต้องการให้รหัส โดยปกติฉันจะมีการเลือกอินพุต '#bla' ไว้แล้วจากนั้นเพิ่มเนื้อหาเพิ่มเติมหลังจากนั้น แม้ว่าฉันจะไม่ชอบก็ตามฉันไม่แน่ใจว่าวิธีการใดวิธีการหนึ่งนั้นมีประโยชน์ต่อความเร็ว

— โร

37

ลอง

.insertAfter()

ที่นี่

$(content).insertAfter('#bla');

— Rifat
แหล่งที่มา

17

รหัสของคุณไม่ควรเป็น$('<div id="space"></div>').insertAfter('#bla')มากกว่า$('#bla').insertAfter(content);หรือเปล่า?

— โร

6

ก่อนอื่นinputองค์ประกอบไม่ควรมีแท็กปิด (จากhttp://www.w3.org/TR/html401/interact/forms.html#edef-INPUT : แท็กปิดท้าย: ถูกห้าม)

สิ่งที่สองคุณต้องการafter()ไม่ใช่append()ฟังก์ชั่น

— naivists
แหล่งที่มา

ถูกต้อง แต่นั่นคือสิ่งที่เกิดขึ้นเมื่อฉันลองใช้ฟังก์ชัน. append ()

— skerit

2

หากเป็น XHTML ดังนั้นองค์ประกอบอินพุตควรปิด (แต่ไม่ใช่แท็กปิดท้าย)

— CiscoIPPhone

2

ใน HTML4 <input>ไม่ควรปิด

— Derek 朕會功夫

1

แก้ไข jQuery: เพิ่มองค์ประกอบหลังจากองค์ประกอบอื่น

<script>
$( "p" ).append( "<strong>Hello</strong>" );
</script>

หรือ

<script type="text/javascript"> 
jQuery(document).ready(function(){
jQuery ( ".sidebar_cart" ) .append( "<a href='http://#'>Continue Shopping</a>" );
});
</script>

— Ashar Zafar
แหล่งที่มา

2

สิ่งนี้ไม่ถูกต้อง ส่วนนี้จะผนวกองค์ประกอบภายในองค์ประกอบหลักเช่นเดียวกับ OP ที่ระบุไว้ ลองอ่านคำถามอีกครั้งและทบทวนคำตอบของคุณ

— Evan Wieland