Wie führe ich eine ausführliche DOM-Einfügung mit jQuery append() (in der richtigen Reihenfolge) durch?

Question

Wenn ich die jQuery append() Methode verwende, ist die resultierende HTML-Ausgabe nicht in der Reihenfolge, die ich beabsichtige.

Wie Sie in dem Testfall unten sehen, jedes Mal, wenn ich ein DIV Tag öffne, ohne es zu schließen, ist es dennoch geschlossen.

Das gleiche gilt für die <ul>-Tag - die auch geschlossen wurde, bevor ich erwartete - ich wollte, dass es nach dem zweiten Tag <li> geschlossen wird, die darunter geschachtelt werden soll.

Was ist der beste Weg, um einen großen Block von dynamischem HTML in der Reihenfolge, in der es geschrieben ist, zu erstellen?

$('#a').remove(); // remove #a from the dom and re-insert it dynamically 
$("<div id='a'>").insertAfter('div#main'); 

$('#a').append(" <ul>"); 
$('#a').append(" <li>A</li>"); 
$('#a').append(" <li>B</li>"); 
$('#a').append(" </ul>"); 
$('#a').append(" <div id='X1'>"); 
$('#a').append(" <div id='b'>"); 
$('#a').append("  <div id='b1'></div>"); 
$('#a').append("  <div id='b2'></div>"); 
$('#a').append(" </div>"); 
$('#a').append(" <div id='c'>"); 
$('#a').append("  <p id='c1'></p>"); 
$('#a').append(" </div>"); 
$('#a').append(" </div>"); 
$('#a').append(" <div id='X2'>B</div>"); 
$('#a').append("</div>"); 

<div id="main> 
    <div id="a> 
    <ul></ul> // <ul> tag is closed!? 
    <li>A</li> 
    <li>B</li> 
    <div id='X1'></div> // div is closed!? 
    <div id='b'> // div is closed!? 
    <div id='b1'></div> 
    <div id='b2'></div> 
    <div id='c'></div> // div is closed!? 
    <p id='c1'></p> 
    <div id='X2'>B</div> 
    </div> 
</div> 

Answer 1

Sie benötigen die vollständige Zeichenfolge erste zu bauen, dann passieren, dass anhängen:

// this creates the div with id 'a', and inserts it into 
// the DOM (assuming you have an existing div with id 'main') 
// 
$("<div id='a'></div>").insertAfter('div#main'); 

// now you can build up additional content as a string... 
// 
var s = " <ul>"; 
s += " <li>A</li>"; 
s += " <li>B</li>"; 
s += " </ul>"; 
s += " <div id='X1'>"; 
s += " <div id='b'>"; 
s += "  <div id='b1'></div>"; 
s += "  <div id='b2'></div>"; 
s += " </div>"; 
s += " <div id='c'>"; 
s += "  <p id='c1'></p>"; 
s += " </div>"; 
s += " </div>"; 
s += " <div id='X2'>B</div>"; 

// now, use the append() function to create DOM from the string, 
// and append it to the content of your div#a all at once. 
// 
$('#a').append(s); 

gibt es effizientere Möglichkeiten, um die Zeichenfolge zu bauen, aber ... Sie bekommen die Idee.

Answer 2

jQuery Append wurde entwickelt, um mit einem vollständigen HTML-Snippet zu arbeiten. Ändern Sie Ihren Code auf alle append() nur einmal und übergeben Sie all Ihren Code miteinander verkettet. Wenn Sie dies nicht tun, schließt append() alle offenen Tags automatisch.

Answer 3

Die wichtige Sache zu erinnern ist, dass .append() nicht HTML anhängen wird, hängt es Elemente DOM erzeugt durch den HTML Sie übergeben, so zum Beispiel <ul> ein <ul></ul> Element sein wird, wie Sie sehen.

es haben zu ähnlichen Abstand heraus, was Sie derzeit haben, müssen Sie entweder jede Zeile anhängen oder \ wie folgt verwenden:

$("<div id='a'>\ 
    <ul> \ 
     <li>A</li> \ 
     <li>B</li> \ 
    </ul> \ 
    <div id='X1'> \ 
    <div id='b'> \ 
     <div id='b1'></div> \ 
     <div id='b2'></div> \ 
    </div> \ 
    <div id='c'> \ 
     <p id='c1'></p> \ 
    </div> \ 
    </div> \ 
    <div id='X2'>B</div> \ 
    </div>").insertAfter('div#main'); 

You can test it out here.

Answer 4

Verwenden Sie eine einfache StringBuffer-Implementierung wie die folgende. Sobald der html offline vollständig gepuffert wurde, schreiben Sie es auf einmal auf das DOM:

function StringBuffer() { 
    this.buffer = []; 
} 

StringBuffer.prototype.append = function append(string) { 
    this.buffer.push(string); 
    return this; 
}; 

StringBuffer.prototype.toString = function toString() { 
    return this.buffer.join(""); 
}; 

var buf = new StringBuffer(); 
buf.append('<ul>'); 
buf.append('<li>A</li>'); 
buf.append('</ul>'); 
...etc... 
$("#a").empty().html(buf.toString()); 

Und siehe: http://developer.yahoo.com/performance/rules.html

Answer 5

<script> 
$('#a').html(your_html); 
</script>