JQuery के प्रतिस्थापन () और HTML () के बीच क्या अंतर है?

145

जब HTML को पैरामीटर के रूप में पारित किया जा रहा है, तो jQuery के प्रतिस्थापन () और HTML () फ़ंक्शन के बीच क्या अंतर है?

jquery

— DMCS
स्रोत

2

इससे मुझे मदद मिली! मैं एक लेबल का पाठ गतिशील रूप से jquery का उपयोग करके बदलने की कोशिश कर रहा था और इस सूत्र ने निश्चित रूप से मेरी मदद की। धन्यवाद!

— HereToLearn_

289

यह HTML कोड लें:

<div id="mydiv">Hello World</div>

करते हुए:

$('#mydiv').html('Aloha World');

में परिणाम होगा:

<div id="mydiv">Aloha World</div>

करते हुए:

$('#mydiv').replaceWith('Aloha World');

में परिणाम होगा:

Aloha World

इसलिए html () तत्व की सामग्री को प्रतिस्थापित करता है, जबकि प्रतिस्थापित () वास्तविक तत्व को प्रतिस्थापित करता है।

— पाओलो बर्गेंटिनो
स्रोत

1

अच्छी व्याख्या!

— लुइस गौविया

31

प्रतिस्थापन () वर्तमान तत्व को बदल देगा, जबकि html () केवल सामग्री को प्रतिस्थापित करता है।

ध्यान दें कि प्रतिस्थापन () वास्तव में तत्व को नहीं हटाएगा, लेकिन इसे केवल DOM से हटाकर संग्रह में आपको वापस कर देगा।

पीटर के लिए एक उदाहरण: http://jsbin.com/ofirip/2

— CGP
स्रोत

3

+1 बहुत उपयोगी है जो यह लिखा है कि प्रतिस्थापन () वास्तव में तत्व को नहीं हटाता है। मुझे इसका पता नहीं चला!

— पीटर

2

यह सच है, यह अभी भी मौजूद है। यह DOM में नहीं है, इसलिए आप इसे नहीं देखेंगे, लेकिन यह अभी भी HTML का एक मान्य टुकड़ा है। प्रमाण: jsbin.com/ofirip/2

— cgp

1

हाँ यह सच है। उदाहरण देने के लिए धन्यवाद। मैं इसे अपने दृष्टिकोण से अनिवार्य रूप से हटाने के रूप में DOM (प्लस कचरा संग्रह) से हटाने के बारे में सोच रहा था। लेकिन आप तकनीकी रूप से सही हैं। मैं इसे हटा दूंगा -1और उम्मीद है कि यह सभी के लिए मददगार होगा। :)

— पीटर

1

टिप्पणी के लिए धन्यवाद, replaceWith () वर्ष तत्व लौटने बस मुझे कुछ डिबगिंग हताशा :( दिया

— Dain

2

हाँ, मैं अब कम से कम आधे घंटे के लिए यह लड़ाई कर रहा हूं, मुझे अभी पता चला है कि फ़ंक्शन बदले हुए तत्व को लौटाता है, मैं उम्मीद कर रहा था कि नए को इस तरह कोड के साथ लौटाया जाए: var $form = $target.closest('tr').replaceWith(html) यह पता $formचलता है कि प्रतिस्थापन से पहले तत्व शामिल है। sigh

— पावेल क्राकोविआक

5

Html () और ReplaceWith () Jquery फ़ंक्शंस का उपयोग करने के दो तरीके हैं।

<div id="test_id">
   <p>My Content</p>
</div>

1.) html () बनाम प्रतिस्थापन ()

var html = $('#test_id p').html(); "मेरी सामग्री" लौटाएगा

लेकिन var replaceWith = $('#test_id p').replaceWith();संपूर्ण DOM ऑब्जेक्ट को वापस कर देगा <p>My Content</p>।

2.) html ('मूल्य') बनाम प्रतिस्थापन ('मूल्य')

$('#test_id p').html('<h1>H1 content</h1>'); आप निम्नलिखित बाहर डाल देंगे।

<div id="test_id">
  <p><h1>H1 content</h1></p>
</div>

लेकिन $('#test_id p').replaceWith('<h1>H1 content</h1>');आप निम्नलिखित बाहर डाल देंगे।

<div id="test_id">
      <h1>H1 content</h1>
</div>

— हर्ष
स्रोत

2

पुराना सवाल है लेकिन यह किसी की मदद कर सकता है।

इंटरनेट एक्सप्लोरर और क्रोम / फ़ायरफ़ॉक्स में ये फ़ंक्शन कैसे काम करते हैं, इसमें कुछ अंतर हैं, यदि आपका HTML मान्य नहीं है।

अपने HTML को साफ करें और वे प्रलेखित के रूप में काम करेंगे।

( </center>मेरी शाम को मेरी लागत को बंद नहीं करना !)

— बेंजामिन वूटन
स्रोत

6

इसलिए आपको अब केंद्र का उपयोग नहीं करना चाहिए। : पी

— रोमेन ट्राइब्स

2

यह जानने के लिए भी उपयोगी हो सकता है कि .empty().append()इसके बजाय इसका उपयोग भी किया जा सकता है .html()। नीचे दिखाए गए बेंचमार्क में यह तेज है लेकिन केवल तभी जब आपको इस फ़ंक्शन को कई बार कॉल करने की आवश्यकता हो।

देखें: https://jsperf.com/jquery-html-vs-empty-append-test

— mistajolly
स्रोत