jQuery
संलग्न

वाक्य - विन्यास

1. $ (चयनकर्ता) .append (सामग्री)
2. $ (सामग्री) .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 () उपयोग

बाहर शुरू:

एचटीएमएल

<table id='my-table' width='960' height='500'></table>

जे एस

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. आधुनिक एरे का उपयोग करना। * विधियाँ

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 के परिशिष्ट

एचटीएमएल

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