276

JQuery में पाठ () और html () कार्यों में क्या अंतर है?

$("#div").html('<a href="example.html">Link</a><b>hello</b>');

बनाम

$("#div").text('<a href="example.html">Link</a><b>hello</b>');

jquery dom

— Brettk
स्रोत

2

एक प्रश्न जो स्वयं-व्याख्यात्मक नहीं है: जब हमें केवल पाठ (कोई html टैग) की आवश्यकता होती है, तो text()विधि तेज है ?? कितना?

— पीटर क्रूस

347

मुझे लगता है कि अंतर लगभग स्व-व्याख्यात्मक है। और यह परीक्षण करने के लिए सुपर तुच्छ है।

jQuery.html()HTML के रूप में स्ट्रिंग jQuery.text()व्यवहार करता है, सामग्री को पाठ के रूप में मानता है

<html>
<head>
  <title>Test Page</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $("#div1").html('<a href="example.html">Link</a><b>hello</b>');
      $("#div2").text('<a href="example.html">Link</a><b>hello</b>');
    });
  </script>
</head>

<body>

<div id="div1"></div>
<div id="div2"></div>

</body>
</html>

एक अंतर जो इतना स्पष्ट नहीं हो सकता है वह jQuery एपीआई प्रलेखन में वर्णित है

.Html के लिए प्रलेखन में () :

.html()विधि एक्सएमएल दस्तावेजों में उपलब्ध नहीं है।

और .text के प्रलेखन में :

.html()विधि के विपरीत , .text()XML और HTML दोनों दस्तावेजों में उपयोग किया जा सकता है।

$(function() {
  $("#div1").html('<a href="example.html">Link</a><b>hello</b>');
  $("#div2").text('<a href="example.html">Link</a><b>hello</b>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2"></div>

स्निपेट का विस्तार करें

Http://jsfiddle.net/hossain/sUTVg/ पर लाइव डेमो

— पीटर बेली
स्रोत

यह भी ध्यान दिया जाना चाहिए, कि लंबाई दोनों के बीच अलग है। jsfiddle.net/sUTVg/458

— GreeKatrina

5

@aequalsb मैं मानता हूं कि यह अब एक पुराना प्रश्न है, लेकिन मुझे यह टिप्पणी करनी होगी कि पाठ को HTML के रूप में माना जाने के कारण ´.html () to का उपयोग करने के लिए डिफ़ॉल्ट खतरनाक है। यदि आपको वह टेक्स्ट किसी क्वेरिस्ट्रिंग पैरामीटर, फॉर्म, हेडर, URL या किसी अन्य स्थान से मिलता है जिसे आप के अलावा कोई अन्य व्यक्ति टेक्स्ट की आपूर्ति या संपादित कर सकता है, तो आप XSS के लिए विस्तृत हैं।

— कैविस

105

((यदि आवश्यक हो तो अपडेट करें, यह उत्तर एक विकी है)

उप-प्रश्न: जब केवल पाठ, तेज क्या है, `.text()`या `.html()`?

उत्तर: .html() तेज है! सभी प्रश्नों के लिए यहां "व्यवहार परीक्षण-किट" देखें ।

इसलिए, निष्कर्ष में, यदि आपके पास "केवल एक पाठ" है, तो html()विधि का उपयोग करें ।

नोट: कोई मतलब नहीं है? याद रखें कि .html()फ़ंक्शन केवल एक आवरण है .innerHTML, लेकिन .text()फ़ंक्शन में jQuery एक "एंटिटी फ़िल्टर" जोड़ता है , और यह फ़िल्टर स्वाभाविक रूप से समय लेता है।

ठीक है, यदि आप वास्तव में प्रदर्शन चाहते हैं ... संपत्ति द्वारा प्रत्यक्ष पाठ-प्रतिस्थापन तक पहुंचने के लिए शुद्ध जावास्क्रिप्ट का उपयोग करेंnodeValue । बेंचमार्क निष्कर्ष:

jQuery की .html()~ 2x से अधिक तेज है .text()।
शुद्ध JS ' .innerHTML~ से 3x तेज है .html()।
शुद्ध JS ' .nodeValue~ से 50x तेज है .html(), ~ 100x से .text(), और ~ 20x से अधिक है .innerHTML।

पुनश्च: .textContentसंपत्ति DOM-Level-3 के साथ पेश की गई थी, .nodeValueDOM-Level-2 है और तेज (!) है।

देखें यह पूरा बेंचमार्क :

// Using jQuery:
simplecron.restart(); for (var i=1; i<3000; i++) 
    $("#work").html('BENCHMARK WORK');
var ht = simplecron.duration();
simplecron.restart(); for (var i=1; i<3000; i++) 
    $("#work").text('BENCHMARK WORK');
alert("JQuery (3000x): \nhtml="+ht+"\ntext="+simplecron.duration());

// Using pure JavaScript only:
simplecron.restart(); for (var i=1; i<3000; i++)
    document.getElementById('work').innerHTML = 'BENCHMARK WORK';
ht = simplecron.duration();
simplecron.restart(); for (var i=1; i<3000; i++) 
    document.getElementById('work').nodeValue = 'BENCHMARK WORK';
alert("Pure JS (3000x):\ninnerHTML="+ht+"\nnodeValue="+simplecron.duration());

— पीटर क्रस
स्रोत

7

लेकिन अगर अविश्वासित इनपुट से निपटने के लिए, आपको जब भी संभव हो टेक्स्ट () का उपयोग करना चाहिए।

— स्कॉट सिमोंटिस

जब आप nodeValueसंपत्ति सेट करते हैं तो @ScottSimontis , "" "को" & lt; ", आदि में बदल देती है

— पीटर क्रस

जब मैं Chrome DevTools ( developer.chrome.com/devtools/docs/timeline ) के साथ "बेंचमार्क" करता हूं , तो परिणाम विपरीत होता है ( .text()लगता है ~ ~ 7x से भी तेज .html())। स्रोत कोड: codepen.io/damhonglinh/pen/vGpQEO । मैंने 1500 तत्वों के साथ परीक्षण किया; .html()~ 220ms .text()लिया और ~ 30ms लिया।

— लिन डैम

हाय @LinhDam। हम ... मेरे बेंचमार्क का उपयोग करते हुए , मेरा फ़ायरफ़ॉक्स कहता है "JQ TIMES (3000x): html = 82 टेक्स्ट = 254", "JS TIMES (3000x): html = 15 टेक्स्ट = 4" ... और मेरा क्रोम कहता है "JQ TIMES (3000x): html = 82 टेक्स्ट = 202 "," JS TIMES (3000x): html = 16 टेक्स्ट = 0 ".... तो दोनों (फ़ायरफ़ॉक्स और क्रोम) में एक ही समय अनुपात होता है ।

— पीटर क्रस

पाठ () और html () के बीच एक वास्तविक बेंचमार्क होना चाहिए या चयनकर्ता को प्राप्त किया जाना चाहिए या सभी मामलों में $ ("# काम") या आप बेंचमार्किंग भी $ ("# काम") बनाम

— EElementById

66

पहला उदाहरण वास्तव में HTML को एम्बेड करेगा, divजबकि दूसरा उदाहरण अपने संबंधित वर्ण संस्थाओं के साथ तत्व से संबंधित वर्णों को बदलने के माध्यम से पाठ से बच जाएगा ताकि यह शाब्दिक रूप से प्रदर्शित हो (अर्थात HTML प्रदर्शित नहीं किया जाएगा)।

— एंड्रयू हरे
स्रोत

1

क्षमा करें, मुझे काफी समझ नहीं है। क्या आप आगे बता सकते हैं। धन्यवाद

— Brettk

आपको क्या मतलब है कि दूसरा उदाहरण "एनकोड" करेगा? यह पहले से ही एन्कोडिंग है, नहीं?

— ब्रेटक

@ ब्रेटक - मैंने कहा कि "सांकेतिक शब्दों में बदलना" लेकिन वह उंगलियों की एक पर्ची थी। मैंने अपने जवाब को बेहतर तरीके से दर्शाया कि मेरा क्या मतलब है।

— एंड्रयू हरे

6

उनका मतलब है कि .text()फ़ंक्शन में, सभी <को बदल दिया जाएगा <। तो .html()ब्राउज़र के साथ एक लिंक और कुछ बोल्ड टेक्स्ट .text()दिखाई देंगे, ब्राउज़र के साथ सब कुछ टेक्स्ट के रूप में दिखाई देगा और लिंक या बोल्ड टेक्स्ट नहीं बनाएंगे।

— मट्टी

59

text()विधि किसी भी HTML है कि यह में पारित हो जाता इकाई-निकल जाता है। का प्रयोग करें text()आप HTML कोड है कि जो लोग पेज देखने पर दिखाई जाएगी सम्मिलित करना चाहते हैं जब।

तकनीकी रूप से, आपका दूसरा उदाहरण प्रस्तुत करता है:

&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;b&gt;hello&lt;/b&gt;

जिसे ब्राउज़र में प्रस्तुत किया जाएगा:

<a href="example.html">Link</a><b>hello</b>

आपका पहला उदाहरण एक वास्तविक लिंक और कुछ बोल्ड टेक्स्ट के रूप में प्रस्तुत किया जाएगा।

— davidcl
स्रोत

4

वास्तव में क्या चल रहा है, यह समझाने के लिए इसे चयनित उत्तर में शामिल किया जाना चाहिए था।

— d512

27

वास्तव में दोनों कुछ समान दिखते हैं लेकिन काफी भिन्न हैं यह आपके उपयोग या इरादे पर निर्भर करता है कि आप क्या हासिल करना चाहते हैं,

उपयोग कहाँ करें:

.html()html तत्वों वाले कंटेनरों पर काम करने के लिए उपयोग करें।
.text()आमतौर पर अलग-अलग खुले और समापन टैग वाले तत्वों के पाठ को संशोधित करने के लिए उपयोग करें

जहां उपयोग नहीं करना है:

.text() विधि का उपयोग फॉर्म इनपुट या स्क्रिप्ट पर नहीं किया जा सकता है।
- .val() इनपुट या टेक्स्टारिया तत्वों के लिए।
- .html() एक स्क्रिप्ट तत्व के मूल्य के लिए।
HTML सामग्री चुनने से .text()html टैग HTML संस्थाओं में परिवर्तित हो जाएंगे।

अंतर:

.text() XML और HTML दोनों दस्तावेजों में इस्तेमाल किया जा सकता है।
.html() केवल html दस्तावेजों के लिए है।

कार्रवाई में अंतर देखने के लिए jsfiddle पर इस उदाहरण की जांच करें

उदाहरण

— ओवैस कुरैशी
स्रोत

1

यह उत्तर समझने में सबसे आसान था और सबसे अच्छा स्वरूपित +1

— केटी

क्या अंतर है bw :: html (डेटा); और वैल (डेटा); @ ओवैस कुरैशी

— मणि

9

अजीब कोई की क्रॉस साइट स्क्रिप्टिंग रोकथाम लाभ उल्लेख किया है कि .text()अधिक .html()(हालांकि दूसरों उल्लेख किया है कि .text()डेटा निकल जाता है)।

.text()जब आप DOM में डेटा अपडेट करना चाहते हैं तो इसका उपयोग करने के लिए हमेशा अनुशंसा की जाती है जो उपयोगकर्ता के लिए केवल डेटा / टेक्स्ट है।

.html() ज्यादातर एक div के भीतर HTML सामग्री प्राप्त करने के लिए इस्तेमाल किया जाना चाहिए।

— लोगों के सामने पहली उपस्थिति करनेवाली
स्रोत

5

जब आप एक साधारण पाठ के रूप में मान प्रदर्शित करने का इरादा रखते हैं तो .text (…) का उपयोग करें।

जब आप HTML स्वरूपित पाठ (या HTML सामग्री) के रूप में मान प्रदर्शित करने का इरादा रखते हैं तो .html (…) का उपयोग करें।

आपको निश्चित रूप से .text (...) का उपयोग करना चाहिए, जब आप सुनिश्चित नहीं होते हैं कि आपके पाठ (जैसे इनपुट नियंत्रण से आने वाले) में वे वर्ण / टैग शामिल नहीं हैं जिनका HTML में विशेष अर्थ है। यह वास्तव में महत्वपूर्ण है क्योंकि इससे पाठ का परिणाम ठीक से प्रदर्शित नहीं होगा, लेकिन यह भी एक अवांछित JS स्क्रिप्ट स्निपेट (जैसे किसी अन्य उपयोगकर्ता इनपुट से आने वाला) सक्रिय होने का कारण हो सकता है ।

— Adorjan प्रिंसेज़
स्रोत

2

मूल रूप से, $ ("# div")। html सामग्री का उपयोग करने के लिए element.innerHTML का उपयोग करता है, और $ ("# div")। पाठ (शायद) element.textContent का उपयोग करता है।

http://docs.jquery.com/Attributes/html :

Set the html contents of every matched element

http://docs.jquery.com/Attributes/text :

Similar to html(), but escapes HTML (replace "<" and ">" with their HTML 
entities).

— सेठ
स्रोत

2

$ ('div।')। html (वैल) सभी चयनित तत्वों के HTML मानों को सेट करेगा, $ ('div'))। पाठ (वैल) सभी चयनित तत्वों के पाठ मूल्यों को निर्धारित करेगा।

JQuery.text के लिए एपीआई डॉक्स ()

JQuery.html के लिए एपीआई डॉक्स ()

मुझे लगता है कि वे क्रमशः # पाठ और तत्व # आंतरिक HTML के अनुरूप हैं। (गेको डोम संदर्भ)।

— मिकिएल कल्कमैन
स्रोत

2

अच्छी तरह से सरल शब्द में।

html () - इनर html (html टैग और टेक्स्ट) पाने के लिए।

पाठ () - केवल पाठ प्राप्त करने के लिए अगर अंदर मौजूद है (केवल पाठ)

— मुस्तकीम के
स्रोत

1

अलग .html()HTML के रूप में मूल्यांकन किया जाता है, .text()एक पाठ के रूप में मूल्यांकन किया जाता है ।
HTML HTML के एक ब्लॉक पर विचार करें

<div id="mydiv">
<div class="mydiv">
    This is a div container
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
    </ul>
    a text after ul
</div>
</div>

जे एस

var out1 = $('#mydiv').html();
var out2 = $('#mydiv').text();
console.log(out1) // This output all the html tag
console.log(out2) // This is output just the text 'This is a div container Link 1 Link 2 a text after ul'

चित्रण इस लिंक http://api.jquery.com/text/ से है

— पास्कल टोवोहरी
स्रोत

1

.text()आपको HTML टैग्स के बीच में वास्तविक टेक्स्ट देगा। उदाहरण के लिए, pटैग के बीच पैराग्राफ पाठ । यह ध्यान रखना दिलचस्प है कि यह आपको उस तत्व के सभी पाठ देगा जो आप अपने $चयनकर्ता के साथ लक्षित कर रहे हैं और साथ ही उस चयनित तत्व के बच्चों के तत्वों के सभी पाठ भी। तो आप एक से अधिक है, तो pशरीर तत्व के अंदर पाठ के साथ टैग और आप एक कर $(body).text(), आप मिल जाएगा सब सब पैराग्राफ से पाठ। (केवल पाठ, pस्वयं टैग नहीं ।)

.html()आपको पाठ और टैग देगा। तो $(body).html()मूल रूप से आप अपने पूरे पृष्ठ HTML पेज दे देंगे

.val()उन तत्वों के लिए काम करता है जिनमें एक valueविशेषता है, जैसे कि input। एक inputनिहित पाठ या HTML नहीं है और इस प्रकार .text()और .html()दोनों हो जाएगा nullके लिए inputतत्वों।

— फेबियन मदुरै
स्रोत

0

मुझे लगता है कि अंतर यह है कि html टैग को text()आप में सम्मिलित करना है html टैग कार्य नहीं करता है

$('#output').html('You are registered'+'<br>'  +'  '
                     + 'Mister'+'  ' + name+'   ' + sourname ); }

आउटपुट:

You are registered <br> Mister name sourname

के text()साथ बदल रहा हैhtml()

उत्पादन

You are registered
Mister name sourname

फिर टैग <br>काम करता हैhtml()

— डेविड
स्रोत

1

कृपया अपना उत्तर सही करें, पहले स्निपेट का उपयोग करना चाहिए text()।

— एमकेआमा

0

पाठ फ़ंक्शन सेट या मान को सादे पाठ के रूप में प्राप्त करता है, अन्यथा, HTML फ़ंक्शन सेट करता है या इसे बदलने या संशोधित करने के लिए HTML टैग के रूप में मान प्राप्त करता है। यदि आप सामग्री बदलना चाहते हैं तो पाठ () का उपयोग करें। लेकिन अगर आपको मार्कअप बदलने की आवश्यकता है तो आपको एचएमटीएल () का उपयोग करना होगा।

यह मेरे लिए छह साल बाद एक बुरा जवाब है, बुरा मत मानना।

— Minhaz
स्रोत

JQuery: टेक्स्ट () और html () में क्या अंतर है?

उप-प्रश्न: जब केवल पाठ, तेज क्या है, .text()या .html()?

उपयोग कहाँ करें:

जहां उपयोग नहीं करना है:

अंतर:

उदाहरण

उप-प्रश्न: जब केवल पाठ, तेज क्या है, `.text()`या `.html()`?