jQuery Nest hängt

Question

ist es möglich, anfügen in jQuery ??

Ich habe versucht, dies zu tun:

var div = $('#ui-container'); 
var div2 = div.append($('<div/>').addClass('second')); 
var div3 = div2.append($('<div/>').addClass('third')); 

ich dies wollen:

<div id='ui-container'> 
    <div class='second'> 
    <div class='third'></div> 
    </div> 
</div> 

Aber ich bekomme diese:

<div id='ui-container'> 
    <div class='second'></div> 
    <div class='third'></div> 
</div> 

Answer 1

Sie haben es zu tun, wie unten,

var div = $('#ui-container'); 
var div2 = $('<div/>').addClass('second').appendTo(div); 
var div3 = div2.append($('<div/>').addClass('third')); 

mit .appendTo(). Denn .append() gibt das Objekt zurück, über das die append-Funktion aufgerufen wurde. Deshalb sehen Sie in Ihrem Fall ein solches Ergebnis.

Answer 2

Versuchen:

var div = $('#ui-container'); 
var div2 = $('<div/>').addClass('second'); 
div2.append($('<div/>').addClass('third')); 
div.append(div2); 

Answer 3

jquery Methoden typischerweise den DOM-Knoten zurück, die sie aufgerufen werden.

Daher

var div2 = div.append($('<div/>').addClass('second')); // returns $('#ui-container') 

Es ist auch mit einem $ wie $div zu Referenz DOM Elemente Standard.

Hier ist eine ausführliche Lösung

// Grab container 
$div = $('#ui-container'); 
// Create first child 
var div2 = '<div class="second"></div>' 
// Append .second to #ui-container 
$div.append(div2); 

// Grab .second from the DOM 
var $div2 = $('.second'); 
// Create grandchild element 
var div3 = '<div class="third"></div>' 
// Append to .second 
$div2.append(div3) 

codepen

Answer 4

@Rajaprabhu Aravindasamy die richtige Antwort hat. Ich dachte, ich würde ein wenig mehr in die Tiefe gehen und eine jsfiddle hinzufügen.

Verwenden Sie appendTo() anstelle von append. Hier ein Angebot von http://api.jquery.com/appendto/

Die Methoden .append() und .appendTo() führen dieselbe Aufgabe aus. Der Hauptunterschied liegt in der Syntax, insbesondere in der Platzierung von Inhalt und Ziel. Mit .append() ist der Selektorausdruck vor der Methode der Container, in den der Inhalt eingefügt wird. Mit .appendTo() dagegen wird der Inhalt der Methode entweder als Selektorausdruck oder als im Handumdrehen erstelltes Markup vorangestellt und in den Zielcontainer eingefügt.

Hier ist das Markup:

var div = $('#ui-container'); 
var div2 = $('<div>div2<div/>').addClass('second').appendTo(div); 
var div3 = $('<div>div3<div/>').addClass('third').appendTo(div2); 

Answer 5

Alle Ihre Variablen div, div2 und div3 auf dasselbe Element beziehen $('#ui-container'). Der einfachste Weg zu verstehen, was Sie wäre tat Ihre Variablen umbenennen, so können Sie sehen, was passiert:

/* What you did is this: */ 
 
var container = $('.result1'); 
 
var containerWithSecondAppended = container.append($('<div/>').addClass('second')); 
 
var containerWithThirdAppended = containerWithSecondAppended.append($('<div/>').addClass('third')); 
 

 
/* What you wanted to do is this: */ 
 
var div = $('.result2'); 
 
var div2 = $('<div/>').addClass('second'); 
 
var div3 = $('<div/>').addClass('third'); 
 
div.append(div2.append(div3));

div { 
 
\t padding: 10px; 
 
\t border: 1px solid black; 
 
} 
 
.result { 
 
\t margin: 10px; 
 
\t padding: 10px; 
 
} 
 
.second { 
 
\t background: none yellow; 
 
} 
 
.third { 
 
\t background: none green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="result result1"></div> 
 
<div class="result result2"></div>

Auch auf Fiddle.

jQuery append method gibt ein jQuery-Element zurück, das angehängt (geändert) wurde.