jQuery
추가

통사론

1. $ (선택자) .append (내용)
2. $ (content) .appendTo (selector)

매개 변수

비고

컨테이너에 요소 추가

해결책 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 웹 기초 - 실적

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