jQuery
Ajouter

Syntaxe

1. $ (sélecteur) .append (contenu)
2. $ (contenu) .appendTo (sélecteur)

Paramètres

Remarques

Ajout d'un élément à un conteneur

Solution 1:

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

Solution 2:

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

Les deux solutions #child l'élément #child (en ajoutant à la fin) à l'élément #parent .

Avant:

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

</div>

Après:

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

  </div>
</div>

Remarque: Lorsque vous ajoutez du contenu qui existe déjà dans le document, ce contenu sera supprimé de son conteneur parent d'origine et ajouté au nouveau conteneur parent. Donc, vous ne pouvez pas utiliser .append() ou .appendTo() pour cloner un élément. Si vous avez besoin d'un clone, utilisez .clone() -> [ http://api.jquery.com/clone/][1]

Utilisation efficace consécutive de .append ()

Commençant:

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

Ajout dans une boucle

Vous venez de recevoir un grand nombre de données. Maintenant, il est temps de faire un tour et de le rendre sur la page.

Votre première pensée pourrait être de faire quelque chose comme ceci:

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

Ceci est parfaitement valide et rendra exactement ce que vous attendez, mais ...

Ne faites pas cela.

Rappelez-vous ces 300 lignes de données?

Chacun forcera le navigateur à recalculer les valeurs de largeur, de hauteur et de positionnement de chaque élément, ainsi que tous les autres styles - à moins qu'ils ne soient séparés par une limite de mise en page , malheureusement pour cet exemple (ils sont les descendants d'un élément <table> ), ils ne peuvent pas.

À petites quantités et peu de colonnes, cette pénalité de performance sera certainement négligeable. Mais nous voulons compter chaque milliseconde.

De meilleures options

1. Ajouter à un tableau séparé, ajouter après la fin de la boucle

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

Parmi ces options, celle-ci repose le plus sur jQuery.

2. Utilisation des méthodes modernes de tableau. *

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

Fonctionnellement équivalent à celui précédent, plus facile à lire.

3. Utiliser des chaînes de HTML (au lieu des méthodes intégrées 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(''));

Parfaitement valide mais encore une fois, pas recommandé . Cela oblige jQuery à analyser une très grande quantité de texte à la fois et n'est pas nécessaire. jQuery est très performant lorsqu'il est utilisé correctement.

4. Créer manuellement des éléments, ajouter au fragment de document

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

Mon préféré Cela illustre une idée générale de ce que fait jQuery à un niveau inférieur.

Plonger plus profond

• Visualiseur de source jQuery
• Array.prototype.join ()
• Array.prototype.map ()
• Array.prototype.reduce ()
• document.createDocumentFragment ()
• document.createTextNode ()
• Google Web Fundamentals - Performances

jQuery ajoute

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>

Scénario

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