jQuery
追加する

構文

1. $（セレクタ）.append（content）
2. $（content）.appendTo（セレクタ）

パラメーター

備考

コンテナに要素を追加する

解決策1：

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

解決策2：

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

両方の溶液は、要素追加さ#child要素に（末尾に追加）を#parent 。

前：

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

</div>

後：

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

  </div>
</div>

注：すでにドキュメントに存在しないコンテンツを追加すると、このコンテンツは元の親コンテナから削除され、新しい親コンテナに追加されます。したがって、 .append()または.appendTo()を使用して要素を複製することはできません。クローンが必要な場合は.clone() - > [ http://api.jquery.com/clone/][1]

効率的な.append（）の連続使用

始める：

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

ループ内に追加する

あなたはちょうど大きなデータの配列を受け取りました。今度はそれをループしてページ上にレンダリングするときです。

あなたの最初の考えは、このようなことをしているかもしれません：

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

これは完全に有効で 、あなたが期待していたものを正確にレンダリングしますが...

こんなことしないで。

300以上のデータ行を覚えていますか？

それぞれが他のスタイルと一緒に、すべての要素の幅、高さ及び位置値を再計算するためにブラウザを強制する-それらはによって分離されている場合を除き、レイアウト境界 、これは残念ながら（この例では、それらはの子孫であるように<table>要素）、 彼らがすることはできません。

小規模で列数が少ない場合、このパフォーマンスの低下はごくわずかです。しかし、我々はミリ秒ごとにカウントしたい。

より良いオプション

1. 別の配列に追加し、ループが完了した後に追加する

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

これらのオプションのうち、これはjQueryに最も依存しています。

2. 現代のArray。*メソッドの使用

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

それ以前のものと機能的に同等で、読みやすい。

3. HTMLの文字列を使用する（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(''));

完璧に有効ですが、もう一度、 推奨されません 。これにより、jQueryは非常に大量のテキストを一度に解析する必要があり、必要ありません。 jQueryは、正しく使用されたときの動作に非常に優れています。

4. 手作業で要素を作成し、文書の断片に追加する

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

私の個人的なお気に入り 。これは、jQueryがより低いレベルで行うことの一般的な考え方を示しています。

より深いダイビング

• jQueryソースビューア
• Array.prototype.join（）
• Array.prototype.map（）
• Array.prototype.reduce（）
• document.createDocumentFragment（）
• document.createTextNode（）
• Google Web Fundamentals - パフォーマンス

jQueryを追加する

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>

スクリプト

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