jQuery
Anhängen

Syntax

1. $ (Selektor) .append (Inhalt)
2. $ (content) .appendTo (Selektor)

Parameter

Bemerkungen

Ein Element an einen Container anhängen

Lösung 1:

$('#parent').append($('#child'));

Lösung 2:

$('#child').appendTo($('#parent'));

Beide Lösungen hängen das Element #child (das am Ende hinzugefügt wird) an das Element #parent .

Vor:

<div id="parent">
  <span>other content</span>
</div>
<div id="child">

</div>

Nach dem:

<div id="parent">
  <span>other content</span>
  <div id="child">

  </div>
</div>

Hinweis: Wenn Sie Inhalte anhängen, die bereits im Dokument vorhanden sind, wird dieser Inhalt aus dem ursprünglichen übergeordneten Container entfernt und an den neuen übergeordneten Container angehängt. Sie können also nicht .append() oder .appendTo() , um ein Element zu klonen. Wenn Sie einen Klon benötigen, verwenden Sie .clone() -> [ http://api.jquery.com/clone/([1]

Effiziente fortlaufende Verwendung von .append ()

Beginnend:

HTML

<table id='my-table' width='960' height='500'></table>

JS

var data = [
    { type: "Name", content: "John Doe" },
    { type: "Birthdate", content: "01/01/1970" },
    { type: "Salary", content: "$40,000,000" },
    // ...300 more rows...
    { type: "Favorite Flavour", content: "Sour" }
];

Anhängen innerhalb einer Schleife

Sie haben gerade eine große Anzahl von Daten erhalten. Jetzt ist es an der Zeit, es durchzublättern und auf der Seite darzustellen.

Ihr erster Gedanke könnte sein, so etwas zu tun:

var i;                        // <- the current item number
var count = data.length;      // <- the total
var row;                      // <- for holding a reference to our row object

// Loop over the array
for ( i = 0; i < count; ++i ) {
    row = data[ i ];

    // Put the whole row into your table
    $('#my-table').append(
        $('<tr></tr>').append(
            $('<td></td>').html(row.type),
            $('<td></td>').html(row.content)
        )
    );
}

Dies ist vollkommen gültig und wird genau das wiedergeben, was Sie erwarten würden, aber ...

Mach das nicht.

Erinnern Sie sich an diese 300 Datenzeilen ?

Jeder wird den Browser zwingen, die Breite, Höhe und Positionierungswerte jedes Elements zusammen mit allen anderen Stilen neu zu berechnen - es sei denn, sie sind durch eine Layoutbegrenzung getrennt, die leider für dieses Beispiel (da sie Nachkommen eines <table> -Elements sind ), Sie können nicht.

Bei geringen Beträgen und wenigen Kolumnen ist dieser Leistungsnachteil sicherlich vernachlässigbar. Aber wir wollen, dass jede Millisekunde zählt.

Bessere möglichkeiten

1. Fügen Sie zu einem separaten Array hinzu, und fügen Sie die Schleife nach Abschluss an

/** 
 * Repeated DOM traversal (following the tree of elements down until you reach
 * what you're looking for - like our <table>) should also be avoided wherever possible.
 */

// Keep the table cached in a variable then use it until you think it's been removed
var $myTable = $('#my-table');

// To hold our new <tr> jQuery objects
var rowElements = [];

var count = data.length;
var i;
var row;

// Loop over the array
for ( i = 0; i < count; ++i ) {
    rowElements.push(
        $('<tr></tr>').append(
            $('<td></td>').html(row.type),
            $('<td></td>').html(row.content)
        )
    );
}

// Finally, insert ALL rows at once
$myTable.append(rowElements);

Von diesen Optionen stützt sich diese Option am meisten auf jQuery.

2. Verwenden moderner Array. * -Methoden

var $myTable = $('#my-table');

// Looping with the .map() method
//  - This will give us a brand new array based on the result of our callback function
var rowElements = data.map(function ( row ) {

    // Create a row
    var $row = $('<tr></tr>');

    // Create the columns
    var $type = $('<td></td>').html(row.type);
    var $content = $('<td></td>').html(row.content);

    // Add the columns to the row
    $row.append($type, $content);
    
    // Add to the newly-generated array
    return $row;
});

// Finally, put ALL of the rows into your table
$myTable.append(rowElements);

Funktionell gleichwertig wie das davor, nur lesbarer.

3. Verwenden von HTML-Zeichenfolgen (anstelle der integrierten Methoden von jQuery)

// ...
var rowElements = data.map(function ( row ) {
    var rowHTML = '<tr><td>';
    rowHTML += row.type;
    rowHTML += '</td><td>';
    rowHTML += row.content;
    rowHTML += '</td></tr>';
    return rowHTML;
});

// Using .join('') here combines all the separate strings into one
$myTable.append(rowElements.join(''));

Perfekt aber wieder, nicht empfehlenswert . Dies zwingt jQuery, eine sehr große Textmenge auf einmal zu analysieren und ist nicht erforderlich. jQuery ist sehr gut bei der richtigen Verwendung.

4. Elemente manuell erstellen, an Fragment des Dokuments anhängen

var $myTable = $(document.getElementById('my-table'));

/**
 * Create a document fragment to hold our columns
 * - after appending this to each row, it empties itself
 *   so we can re-use it in the next iteration.
 */
var colFragment = document.createDocumentFragment();

/**
 * Loop over the array using .reduce() this time.  
 * We get a nice, tidy output without any side-effects.
 *  - In this example, the result will be a 
 *    document fragment holding all the <tr> elements.
 */
var rowFragment = data.reduce(function ( fragment, row ) {

    // Create a row
    var rowEl = document.createElement('tr');

    // Create the columns and the inner text nodes
    var typeEl = document.createElement('td');
    var typeText = document.createTextNode(row.type);
    typeEl.appendChild(typeText);

    var contentEl = document.createElement('td');
    var contentText = document.createTextNode(row.content);
    contentEl.appendChild(contentText);

    // Add the columns to the column fragment
    // - this would be useful if columns were iterated over separately
    //   but in this example it's just for show and tell.
    colFragment.appendChild(typeEl);
    colFragment.appendChild(contentEl);
    
    rowEl.appendChild(colFragment);

    // Add rowEl to fragment - this acts as a temporary buffer to 
    // accumulate multiple DOM nodes before bulk insertion
    fragment.appendChild(rowEl);

    return fragment;
}, document.createDocumentFragment());

// Now dump the whole fragment into your table
$myTable.append(rowFragment);

Mein persönlicher Favorit . Dies veranschaulicht eine allgemeine Vorstellung davon, was jQuery auf einer niedrigeren Ebene tut.

Tauchen Sie tiefer ein

• jQuery Source Viewer
• Array.prototype.join ()
• Array.prototype.map ()
• Array.prototype.reduce ()
• document.createDocumentFragment ()
• document.createTextNode ()
• Google Web Fundamentals - Leistung

jQuery anhängen

HTML

<p>This is a nice </p>
<p>I like </p>

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

<button id="btn-1">Append text</button>
<button id="btn-2">Append list item</button>

Skript

$("#btn-1").click(function(){
    $("p").append(" <b>Book</b>.");
});
$("#btn-2").click(function(){
    $("ul").append("<li>Appended list item</li>");
 });
});