jQuery
Bifoga

Syntax

1. $ (Väljare) .append (innehåll)
2. $ (Innehåll) .appendTo (väljare)

parametrar

Anmärkningar

Lägga till ett element i en behållare

Lösning 1:

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

Lösning 2:

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

Båda lösningarna lägger till elementet #child (lägger till i slutet) till elementet #parent .

Innan:

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

</div>

Efter:

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

  </div>
</div>

Obs: När du lägger till innehåll som redan existerar i dokumentet kommer det att tas bort från dess ursprungliga föräldrabehållare och läggas till den nya överordnade behållaren. Så du kan inte använda .append() eller .appendTo() att klona ett element. Om du behöver en klon använder du .clone() -> [ http://api.jquery.com/clone/????1]

Effektiv efterföljande .append () användning

Börjar:

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

Lägga in i en slinga

Du har precis fått en stor mängd data. Nu är det dags att gå igenom och återge det på sidan.

Din första tanke kan vara att göra något liknande:

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

Detta är helt giltigt och kommer att göra exakt vad du kan förvänta dig, men ...

Gör inte detta.

Kommer du ihåg de 300 raderna med data?

Var och en kommer att tvinga webbläsaren att omberäkna alla elementets bredd, höjd och positioneringsvärden, tillsammans med andra stilar - såvida de inte separeras av en layoutgräns , vilket tyvärr för detta exempel (eftersom de är ättlingar till ett <table> -element) ), de kan inte.

Vid små mängder och få kolumner är denna prestationsstraff verkligen försumbar. Men vi vill att varje millisekund räknas.

Bättre alternativ

1. Lägg till i en separat grupp, bifoga efter att slingan är klar

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

Av dessa alternativ förlitar den sig mest på jQuery.

2. Använda moderna Array. * -Metoder

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

Funktionellt motsvarande den före den, bara lättare att läsa.

3. Använda strängar av HTML (istället för jQuery inbyggda metoder)

// ...
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 giltig men igen, rekommenderas inte . Detta tvingar jQuery att analysera en mycket stor mängd text på en gång och är inte nödvändigt. jQuery är mycket bra på vad den gör när den används korrekt.

4. Skapa element manuellt, lägg till dokumentfragmentet

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

Min personliga favorit . Detta illustrerar en allmän uppfattning om vad jQuery gör på en lägre nivå.

Dyk djupare

• jQuery källvisare
• Array.prototype.join ()
• Array.prototype.map ()
• Array.prototype.reduce ()
• document.createDocumentFragment ()
• document.createTextNode ()
• Googles grundläggande webbsidor - Prestanda

jQuery bilaga

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>

Manus

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