jquery .html () बनाम .append ()

Question

कहते हैं कि मेरे पास एक खाली div है:

<div id='myDiv'></div>

क्या इस:

$('#myDiv').html("<div id='mySecondDiv'></div>");

बराबर:

var mySecondDiv=$("<div id='mySecondDiv'></div>");
$('#myDiv').append(mySecondDiv);

Comments

नहीं, दूसरे के पास एक आईडी नहीं है, इसलिए एक ही टेक्स्ट आउटपुट नहीं होगा।

— मैट एलेन

पहली बार इसे चलाने के बाद .html बहुत तेज है। जब आप इसे पहली बार चलाते हैं तो यह दूसरा या ऐसा हो सकता है।

— सुखजीत धोत

Answer 1

जब भी आप jQuery के किसी भी तरीके से HTML की एक स्ट्रिंग पास करते हैं, तो यही होता है:

एक अस्थायी तत्व बनाया गया है, चलो इसे x कहते हैं। x innerHTML, HTML के उस स्ट्रिंग पर सेट है जिसे आपने पास किया है। फिर jQuery के प्रत्येक उत्पादित नोड्स (जो कि, x का childNodes) को एक नए बनाए गए दस्तावेज़ के टुकड़े पर स्थानांतरित कर देगा, जिसे वह अगली बार कैश करेगा। यह फिर childNodesएक ताज़ा DOM संग्रह के रूप में टुकड़ा लौटेगा ।

ध्यान दें कि यह वास्तव में उससे कहीं अधिक जटिल है, क्योंकि jQuery क्रॉस-ब्राउज़र चेक और विभिन्न अन्य अनुकूलन का एक गुच्छा करता है। जैसे अगर आप सिर्फ पास <div></div>होते हैं jQuery(), तो jQuery शॉर्टकट लेगा और बस कर देगा document.createElement('div')।

संपादित करें : चेक के सरासर मात्रा को देखने के लिए कि jQuery प्रदर्शन, एक नजर है यहाँ , यहाँ और यहाँ ।

---

innerHTMLहै आम तौर पर तेजी से दृष्टिकोण हालांकि न दें पर शासन है कि क्या आप हर समय करते हैं। jQuery का दृष्टिकोण बहुत सरल नहीं है element.innerHTML = ...- जैसा कि मैंने उल्लेख किया है, चेक और अनुकूलन का एक समूह है।

---

सही तकनीक स्थिति पर बहुत अधिक निर्भर करती है। यदि आप बड़ी संख्या में समान तत्वों का निर्माण करना चाहते हैं, तो आखिरी चीज जो आप करना चाहते हैं, वह एक बड़े पैमाने पर लूप बनाना है, जो प्रत्येक पुनरावृत्ति पर एक नया jQuery ऑब्जेक्ट बनाता है। JQuery के साथ 100 divs बनाने का सबसे तेज़ तरीका:

jQuery(Array(101).join('<div></div>'));

---

ध्यान में रखने के लिए पठनीयता और रखरखाव के मुद्दे भी हैं।

यह:

$('<div id="' + someID + '" class="foobar">' + content + '</div>');

... इससे बनाए रखने के लिए बहुत कठिन है:

$('<div/>', {
    id: someID,
    className: 'foobar',
    html: content
});

Comments

jQuery (सरणी (101) .join ( '<div> </ div>')); <- 100 के बजाय 101 क्यों?

— ताकोन

बस एक डेटापॉइंट जोड़ना चाहता था। एक ऐप पर कुछ प्रदर्शन परीक्षण कर रहा है जो <li> के एक बड़े (10K +) बैच को <ul> में लोड करता है और ~ 12s -> .25s से .append को स्विच करके रेंडर (नहीं लोड) समय में वृद्धि देखी गई। .html (। के लिए।) यदि आप पहले से ही 'जॉइन' ट्रिक कर रहे हैं या अपनी सूची में एक बड़े HTML स्ट्रिंग का निर्माण कर रहे हैं, तो निश्चित रूप से इन दोनों विधि में एक पूर्ण अंतर है।

— सर्वज्ञ

@tacone क्योंकि "ग्लू" को जोड़कर एरे तत्वों के बीच लगाया जाता है । 101होगा 100 glues लागू, 3 तत्वों में शामिल होने की तरह 2 glues होगा EL-glue-EL-glue-EL:। जेम्स के उदाहरण में, सरणी तत्व "खाली" हैं इसलिए एन खाली तत्वों में शामिल होने से एन -1 लगातार चमकता है।

— फेब्रीसियो मैटे

ऊपर उपयोग किए गए jquery सिंटैक्स के संदर्भ में रुचि रखने वालों के लिए और जो अनुमति दी गई है उसे api.jquery.com/jquery/#jQuery-html-attributes देखें ।

— थाडडस अल्बर्स

इसमें एक बड़ा अंतर यह है कि यह डेटा खो देता है जो डोमों से जुड़ा था।

— एड्रियन बार्थोलोम्यू

Answer 2

वे एक जैसे नहीं हैं। पहले एक HTML को दूसरी jQuery ऑब्जेक्ट बनाए बिना बदल देता है। दूसरा दूसरे div के लिए एक अतिरिक्त jQuery आवरण बनाता है, फिर इसे पहले जोड़ देता है।

एक jQuery आवरण (प्रति उदाहरण):

$("#myDiv").html('<div id="mySecondDiv"></div>');

$("#myDiv").append('<div id="mySecondDiv"></div>');

दो jQuery के आवरण (प्रति उदाहरण):

var mySecondDiv=$('<div id="mySecondDiv"></div>');
$('#myDiv').html(mySecondDiv);

var mySecondDiv=$('<div id="mySecondDiv"></div>');
$('#myDiv').append(mySecondDiv);

आपके पास कुछ अलग उपयोग मामले चल रहे हैं। यदि आप सामग्री को बदलना चाहते हैं, .htmlतो इसके समकक्ष एक शानदार कॉल है innerHTML = "..."। हालाँकि, यदि आप केवल सामग्री जोड़ना चाहते हैं, तो अतिरिक्त $()आवरण सेट अनावश्यक है।

यदि आपको divबाद में जोड़े गए हेरफेर करने की आवश्यकता है तो केवल दो रैपर का उपयोग करें । उस मामले में भी, आपको अभी भी केवल एक का उपयोग करने की आवश्यकता हो सकती है:

var mySecondDiv = $("<div id='mySecondDiv'></div>").appendTo("#myDiv");
// other code here
mySecondDiv.hide();

Comments

आप समझ सकते हैं? स्ट्रिंग संघनन पहले से ही यहां एक त्रुटि (अनपेक्षित उद्धरण) को जाने देता है। मेरी पोस्ट देखें: P

— kizzx2

Answer 3

यदि .addआप का मतलब है .append, तो परिणाम वही है यदि #myDivखाली है।

क्या प्रदर्शन वही है? पता नहीं।

.html(x) के रूप में एक ही बात कर समाप्त होता है .empty().append(x)

Comments

इसके अलावा, पहले वाले के पास स्पष्ट रूप से mySecondDiv की एक आईडी होगी, जबकि दूसरे की कोई आईडी नहीं होगी। और वाक्यविन्यास को। उद्धरण ("<div id = 'mySecondDiv'> </ div>") को दोहरे उद्धरण चिह्नों का उपयोग करके एकल उद्धरणों का उपयोग करने में सक्षम होना चाहिए।

— रयानुलिट

Answer 4

खैर, वह .html()उपयोग .innerHTMLजो डोम निर्माण से तेज है ।

Answer 5

आप उसी प्रभाव को प्राप्त करने के लिए दूसरी विधि प्राप्त कर सकते हैं:

var mySecondDiv = $('<div></div>');
$(mySecondDiv).find('div').attr('id', 'mySecondDiv');
$('#myDiv').append(mySecondDiv);

लुका ने उल्लेख किया कि html()बस एचटीटी HTML डाला जाता है जिसके परिणामस्वरूप तेज प्रदर्शन होता है।

हालांकि कुछ अवसरों में, आप दूसरे विकल्प का विकल्प चुनेंगे:

// Clumsy string concat, error prone
$('#myDiv').html("<div style='width:'" + myWidth + "'px'>Lorem ipsum</div>");

// Isn't this a lot cleaner? (though longer)
var newDiv = $('<div></div>');
$(newDiv).find('div').css('width', myWidth);
$('#myDiv').append(newDiv);

Comments

यह बेहद अक्षम (और टूटा हुआ) jQuery कोड है। यदि आप px$('<div />', { width: myWidth }).appendTo("#myDiv");

— संघात

यह "उपयोगी नहीं" कैसे है? पोस्टर ने "अंतर" (कीवर्ड "बनाम") के लिए कहा है, इसलिए मैं उसे अंतर बताता हूं। कोड क्रिया है, लेकिन मैं सिर्फ इसलिए "अक्षम" नहीं कहूंगा कि यह एक लाइनर नहीं है। क्या लोगों को सामान समझाते समय हमें क्रिया नहीं करनी चाहिए?

— kizzx2

Answer 6

.html() सब कुछ बदल देगा।

.append() बस अंत में जोड़ देंगे।

Answer 7

दिए गए जवाबों के अलावा, इस मामले में कि आपके पास कुछ ऐसा है:

<div id="test">
    <input type="file" name="file0" onchange="changed()">
</div>
<script type="text/javascript">
    var isAllowed = true;
    function changed()
    {
        if (isAllowed)
        {
            var tmpHTML = $('#test').html();
            tmpHTML += "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
            $('#test').html(tmpHTML);
            isAllowed = false;
        }
    }
</script>

मतलब कि आप स्वचालित रूप से एक और फ़ाइल अपलोड जोड़ना चाहते हैं यदि कोई भी फ़ाइल अपलोड की गई थी, तो उल्लिखित कोड काम नहीं करेगा, क्योंकि फ़ाइल अपलोड होने के बाद, पहला फ़ाइल-अपलोड तत्व फिर से बनाया जाएगा और इसलिए अपलोड की गई फ़ाइल को इससे मिटा दिया जाएगा । आपको इसके बजाय .append () का उपयोग करना चाहिए:

    function changed()
    {
        if (isAllowed)
        {
            var tmpHTML = "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
            $('#test').append(tmpHTML);
            isAllowed = false;
        }
    }

Answer 8

यह मेरे साथ घटित हुआ है । जकुरी संस्करण: 3.3। यदि आप वस्तुओं की एक सूची के माध्यम से पाशन कर रहे हैं, और प्रत्येक वस्तु को कुछ मूल डोम तत्व के बच्चे के रूप में जोड़ना चाहते हैं, तो .html और .append बहुत अलग व्यवहार करेंगे। .htmlमूल तत्व में केवल अंतिम ऑब्जेक्ट को जोड़ना समाप्त होगा, जबकि मूल तत्व के .appendबच्चों के रूप में सभी सूची वस्तुओं को जोड़ देगा।