jQuery
append

Syntaxis

1. $ (Selector) .append (inhoud)
2. $ (Inhoud) .appendTo (selector)

parameters

Opmerkingen

Een element toevoegen aan een container

Oplossing 1:

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

Oplossing 2:

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

Beide oplossingen voegen het element #child (voegen aan het einde toe) aan het element #parent .

Voordat:

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

</div>

Na:

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

  </div>
</div>

Opmerking: wanneer u inhoud toevoegt die al in het document bestaat, wordt deze inhoud uit de oorspronkelijke bovenliggende container verwijderd en aan de nieuwe bovenliggende container toegevoegd. U kunt dus niet .append() of .appendTo() om een element te klonen. Als je een kloon nodig hebt, gebruik je .clone() -> [ http://api.jquery.com/clone/

Efficiënt opeenvolgend .append () gebruik

Beginnen:

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" }
];

Binnen een lus toevoegen

U heeft zojuist een groot aantal gegevens ontvangen. Nu is het tijd om door te bladeren en het op de pagina weer te geven.

Je eerste gedachte kan zijn om zoiets te doen:

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)
        )
    );
}

Dit is volkomen geldig en geeft precies weer wat je zou verwachten, maar ...

Doe dit niet.

Ken je die 300+ rijen met gegevens nog?

Elke dwingt de browser om de breedte, hoogte en positioneringswaarden van elk element opnieuw te berekenen, samen met andere stijlen - tenzij ze worden gescheiden door een lay-outgrens , wat helaas voor dit voorbeeld (omdat ze afstammelingen zijn van een <table> -element ), ze kunnen niet.

Bij kleine hoeveelheden en weinig kolommen zal deze prestatieboete zeker te verwaarlozen zijn. Maar we willen dat elke milliseconde telt.

Betere opties

1. Toevoegen aan een afzonderlijke array, toevoegen nadat lus is voltooid

/** 
 * 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);

Van deze opties vertrouwt deze het meest op jQuery.

2. Moderne Array. * -Methoden gebruiken

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);

Functioneel gelijk aan degene ervoor, alleen gemakkelijker te lezen.

3. HTML-reeksen gebruiken (in plaats van de ingebouwde methoden van 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(''));

Volkomen geldig maar nogmaals, niet aanbevolen . Dit dwingt jQuery om een zeer grote hoeveelheid tekst tegelijk te parseren en is niet nodig. jQuery is erg goed in wat het doet bij correct gebruik.

4. Maak handmatig elementen, voeg toe aan documentfragment

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);

Mijn persoonlijke favoriet . Dit illustreert een algemeen idee van wat jQuery op een lager niveau doet.

Duik dieper

• jQuery bronviewer
• Array.prototype.join ()
• Array.prototype.map ()
• Array.prototype.reduce ()
• document.createDocumentFragment ()
• document.createTextNode ()
• Google Web Fundamentals - Prestaties

jQuery toevoegen

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>

Script

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