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>

— Skerit
quelle

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