1016

मैं निम्नलिखित कैसे प्राप्त कर सकता हूं:

document.all.regTitle.innerHTML = 'Hello World';

JQuery का उपयोग करके regTitleमेरी div ID कहाँ है?

— tonyf
स्रोत

1528

$("#regTitle").html("Hello World");

— जेड
स्रोत

320

एचटीएमएल () समारोह एचटीएमएल के तार ले जा सकते हैं, और प्रभावी ढंग से संशोधित करेगा .innerHTMLसंपत्ति।

$('#regTitle').html('Hello World');

हालाँकि, पाठ () फ़ंक्शन निर्दिष्ट तत्व के पाठ (पाठ) मूल्य को बदल देगा, लेकिन htmlसंरचना को बनाए रखेगा ।

$('#regTitle').text('Hello world');

— zombat
स्रोत

12

"लेकिन html संरचना रखें"। क्या तुम समझा सकते हो?

— अनूप जोशी

10

JQuery एपीआई प्रलेखन ( api.jquery.com/text ) से, के text()रूप में अलग है Unlike the .html() method, .text() can be used in both XML and HTML documents.:। इसके अलावा, के अनुसार stackoverflow.com/questions/1910794/... , jQuery.html() treats the string as HTML, jQuery.text() treats the content as text।

— गोर्गेसेनेगर

1

@AnoopJoshi stackoverflow.com/questions/1910794/…

— मचावी

68

यदि आपके पास एक jquery वस्तु है, जिसे आप मौजूदा सामग्री के बजाय प्रस्तुत करना चाहते हैं: तो बस सामग्री को रीसेट करें और नए को जोड़ें।

var itemtoReplaceContentOf = $('#regTitle');
itemtoReplaceContentOf.html('');
newcontent.appendTo(itemtoReplaceContentOf);

या:

$('#regTitle').empty().append(newcontent);

— सिने
स्रोत

17

उपयोग करने के लिए अच्छी जगहitemtoReplaceContentOf.empty();

— केविन पैंको

है newcontentहै एक jQuery वस्तु? यह स्पष्ट नहीं है।

— किमी।

@kmoser पहले उदाहरण में, newcontent वास्तव में एक jquery वस्तु है। दूसरे उदाहरण में यह प्रकार का हो सकता है htmlStringया Elementया Textया Arrayया jQueryके अनुसार api.jquery.com/append

— सिने

27

यहाँ आपका जवाब है:

//This is the setter of the innerHTML property in jQuery
$('#regTitle').html('Hello World');

//This is the getter of the innerHTML property in jQuery
var helloWorld = $('#regTitle').html();

— डेन
स्रोत

11

उत्तर:

$("#regTitle").html('Hello World');

स्पष्टीकरण:

$के बराबर है jQuery। दोनों ही jQuery लाइब्रेरी में एक ही ऑब्जेक्ट का प्रतिनिधित्व करते हैं। "#regTitle"कोष्ठक के अंदर कहा जाता है चयनकर्ता जो jQuery पुस्तकालय द्वारा किया जाता है जो एचटीएमएल डोम (दस्तावेज़ ऑब्जेक्ट मॉडल) आप के लिए कोड लागू करना चाहते हैं के तत्व (रों) की पहचान। #पहले regTitlejQuery कि कह रहा है regTitleडोम के अंदर एक तत्व की आईडी है।

वहाँ से, डॉट नोटेशन का उपयोग html फ़ंक्शन को कॉल करने के लिए किया जाता है, जो कि आप को कोष्ठक के बीच में जो भी पैरामीटर रखते हैं, उसके भीतर के HTML को बदल देता है, जो इस मामले में है 'Hello World'।

— Webeng
स्रोत

11

पहले से ही उत्तर हैं जो तत्व के इनर HTML को बदलने का तरीका देते हैं।

लेकिन मैं आपको सुझाव दूंगा, कि आपको HTML बदलने के लिए कुछ एनीमेशन जैसे Fade Out / Fade In का उपयोग करना चाहिए जो कि बदले हुए HTML को तुरंत बदल देता है जो कि बेहतर HTML को प्रभावित करता है।

इनर HTML को बदलने के लिए एनीमेशन का उपयोग करें

$('#regTitle').fadeOut(500, function() {
    $(this).html('Hello World!').fadeIn(500);
});

यदि आपके पास कई फ़ंक्शन हैं जिनकी आवश्यकता है, तो आप सामान्य फ़ंक्शन को कॉल कर सकते हैं जो आंतरिक एचटीएमएल को बदलता है।

function changeInnerHtml(elementPath, newText){
    $(elementPath).fadeOut(500, function() {
        $(this).html(newText).fadeIn(500);
    });
}

— सोमनाथ मुलुक
स्रोत

11

आप इसे प्राप्त करने के लिए jquery में html या पाठ फ़ंक्शन का उपयोग कर सकते हैं

$("#regTitle").html("hello world");

या

$("#regTitle").text("hello world");

— जितेंद्र वार्ष्णेय
स्रोत

9

jQuery का .html()उपयोग मिलान किए गए गैर रिक्त तत्वों की सामग्री को स्थापित करने और प्राप्त करने के लिए किया जा सकता है innerHTML।

var contents = $(element).html();
$(element).html("insert content into element");

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

Html के बाद खुले और बंद कोष्ठक ने मुझे बचा लिया। इसलिए याद रखें कि उन दो महत्वपूर्ण हैं।

— गेलि एन

9

उदाहरण

$( document ).ready(function() {
  $('.msg').html('hello world');
});

    <!DOCTYPE html>
    <html>
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    
      </head>
      <body>
        <div class="msg"></div>
      </body>
    </html>

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

— निकित बारोचिया
स्रोत

7

$("#regTitle")[0].innerHTML = 'Hello World';

— अल.रुस्सेबेलोन तोमह
स्रोत

3

बस कुछ प्रदर्शन अंतर्दृष्टि जोड़ने के लिए।

कुछ साल पहले मेरे पास एक परियोजना थी, जहां हमारे पास विभिन्न HTML तत्वों के लिए एक बड़ा HTML / पाठ सेट करने की कोशिश करने वाले मुद्दे थे।

यह प्रकट हुआ, कि तत्व को "फिर से बनाना" और इसे डोम पर इंजेक्ट करना डोम कंटेंट को अपडेट करने के लिए सुझाए गए तरीकों में से किसी भी तरह से तेज था।

तो कुछ इस तरह:

var text = "very big content";
$("#regTitle").remove();
$("<div id='regTitle'>" + text + "</div>").appendTo("body");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

आपको बेहतर प्रदर्शन मिलना चाहिए। मैंने हाल ही में यह मापने की कोशिश नहीं की है (ब्राउज़र इन दिनों चतुर होना चाहिए), लेकिन यदि आप प्रदर्शन की तलाश कर रहे हैं तो यह मदद कर सकता है।

नकारात्मक पक्ष यह है कि आपके पास डोम और संदर्भों को सही वस्तु की ओर इंगित करने के लिए रखने के लिए अधिक काम होगा।

— पावेल डोनचेव
स्रोत

3

jQuery के कुछ कार्य हैं जो पाठ के साथ काम करते हैं, यदि आप text()एक का उपयोग करते हैं, तो यह आपके लिए काम करेगा:

$("#regTitle").text("Hello World");

इसके अलावा, आप इसके html()बजाय उपयोग कर सकते हैं , यदि आपके पास कोई html टैग है ...

— एलिरेज़ा
स्रोत

JQuery का उपयोग करके div के भीतर के HTML को कैसे बदलें?

इनर HTML को बदलने के लिए एनीमेशन का उपयोग करें