Wie kann ich ein Element nach einem anderen Element hinzufügen?

174

Ich habe ein bestimmtes Textfeld und möchte danach ein Div hinzufügen. Ich habe das versucht.append() Funktion , aber das fügt nur das div im Element hinzu.

Zum Beispiel habe ich:

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

und ich möchte das ändern in:

<input type="text" id="bla" /><div id="space"></div>
html jquery append insertafter Skerit
quelle

Antworten:

287

Versuchen Sie es mit der after()Methode:

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

Dokumentation

Eberesche
quelle
8
Die Methoden .after () und .insertAfter () führen dieselbe Aufgabe aus.
Rifat
7
Das ist richtig, aber es hängt davon ab, wie Sie es lieber codieren. Normalerweise würde ich die Eingabe '#bla' bereits ausgewählt haben und anschließend den zusätzlichen Inhalt hinzufügen. Ich bin mir jedoch nicht sicher, ob eine der beiden Methoden einen Geschwindigkeitsvorteil hat.
Rowan
37

Versuchen

.insertAfter()

Hier

$(content).insertAfter('#bla');
Rifat
quelle
17
Sollte Ihr Code nicht eher so sein $('<div id="space"></div>').insertAfter('#bla')als $('#bla').insertAfter(content);?
Rowan
6

Zunächst inputsollte das Element kein schließendes Tag haben (von http://www.w3.org/TR/html401/interact/forms.html#edef-INPUT : End-Tag: verboten).

Zweitens brauchen Sie die after() , nicht append()Funktion.

Naivisten
quelle
Richtig, aber genau das passiert, wenn ich die Funktion .append () ausprobiere.
Skerit
2
Wenn es sich um XHTML handelt, sollte das Eingabeelement geschlossen sein (jedoch nicht mit einem End-Tag).
CiscoIPPhone
2
In HTML4 <input>sollte nicht geschlossen werden.
Derek 18 會 功夫
1

Gelöste jQuery: Element nach einem anderen Element hinzufügen

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

ODER

<script type="text/javascript"> 
jQuery(document).ready(function(){
jQuery ( ".sidebar_cart" ) .append( "<a href='http://#'>Continue Shopping</a>" );
});
</script>
Ashar Zafar
quelle
2
Das ist falsch. Dadurch wird das Element innerhalb des übergeordneten Elements angehängt, genau wie im angegebenen OP. Lesen Sie die Frage erneut und überarbeiten Sie Ihre Antwort.
Evan Wieland