मैं एक दिव्य तत्व के अंदर पाठ को कैसे बदलूं?

Question

मुझे डायव तत्व के भीतर पाठ को गतिशील रूप से सेट करने की आवश्यकता है। सबसे अच्छा, ब्राउज़र सुरक्षित तरीका क्या है? मेरे पास प्रोटोटाइप और स्क्रिप्टकुलस उपलब्ध हैं।

<div id="panel">
  <div id="field_name">TEXT GOES HERE</div>
</div>

यहाँ क्या समारोह की तरह दिखेगा:

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById('field_name');
  //Make replacement here
}

Comments

क्या स्वीकृत उत्तर वही करता है जो आप चाहते हैं कि जब पाठ को सौंपा जाए जैसे: - <span style = "font-size: 36pt"> यह बड़ा है </ span>। यदि यह व्यवहार वांछनीय है तो क्या आप मिलान करने के लिए प्रश्न को फिर से उद्धृत कर सकते हैं?

— एंथनीवजोन

क्या यह एक XSS इंजेक्शन हमले में इस्तेमाल किया जा सकता है?

— जेम्स वेस्टगेट

Answer 1

मैं प्रोटोटाइप के updateतरीके का उपयोग करता हूं जो सादे पाठ, एक HTML स्निपेट या किसी भी जावास्क्रिप्ट ऑब्जेक्ट का समर्थन करता है जो एक toStringविधि को परिभाषित करता है ।

$("field_name").update("New text");

• Element.update प्रलेखन

Comments

@ पहले से ही ओपी ने कहा कि वे पहले से ही प्रोटोटाइप का उपयोग कर रहे थे, इसलिए यदि ऐसा है तो इसका लाभ उठाने के लिए समझ में आता है।

— जॉन टॉपले

क्यों मेरे साथ केवल काम करता है$("field_name").text("new text");

— ड्रेको

@ ड्रेको क्या आप प्रोटोटाइपोटाइप्स का उपयोग कर रहे हैं?

— जॉन टॉपले

@Drako मूल प्रश्न और सात साल पहले के मेरे उत्तर प्रोटोटाइपजस के लिए नहीं हैं।

— जॉन टॉपले

Answer 2

आप बस का उपयोग कर सकते हैं:

fieldNameElement.innerHTML = "My new text!";

Comments

क्या 'स्थिर' पाठ के लिए एकल उद्धरण का उपयोग नहीं किया जाना चाहिए?

— मिलान बाबूसकोव

PHP में, हाँ। जावास्क्रिप्ट में, मुझे विश्वास नहीं है कि यह मायने रखता है।

— सियजयोज

जावास्क्रिप्ट में, एकल और दोहरे उद्धरण विनिमेय हैं।

— 17 की 26

बुरी सलाह, क्योंकि पाठ में दुर्घटना से एचटीएमएल-मार्कअप जैसी सामग्री हो सकती है

— ट्रिडेंट

element.innerHTML = "<script>doSomethingMalicious()</script>";एक अच्छा विचार नहीं होगा। element.innerHTML = "& neither will this";

— जोसेफ नेल्स

Answer 3

2013 में और बाद में पढ़ने वाले सभी के लिए अद्यतन:

इस उत्तर में बहुत सारे SEO हैं, लेकिन सभी उत्तर गंभीर रूप से पुराने हैं और पुस्तकालयों पर निर्भर करते हैं कि वे ऐसे काम करें जो सभी वर्तमान ब्राउज़र बॉक्स से बाहर करते हैं।

एक दिव्य तत्व के अंदर पाठ को बदलने के लिए, Node.textContent का उपयोग करें, जो सभी वर्तमान ब्राउज़रों में प्रदान किया गया है।

fieldNameElement.textContent = "New text";

Comments

@ लॉजोलस इसलिए दो साल पहले 'वर्तमान ब्राउज़र' लिखना।

— मिकमेकाना

धन्यवाद! मैं अन्य जवाबों की कोशिश कर रहा था, सोच रहा था कि 'इनरएचटीएमएल' काम क्यों नहीं कर रहा था।

— 18

आप इस बात पर विस्तार से विचार कर सकते हैं कि textContentबेहतर तरीका क्यों है innerHTML: यह तेजी से, सुरक्षित और अधिक उपयुक्त है जब जानबूझकर HTML मार्कअप डालने की कोशिश नहीं की जा रही है।

— निश्चितप्रक्रिया

Answer 4

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById("field_name");
  while(fieldNameElement.childNodes.length >= 1) {
    fieldNameElement.removeChild(fieldNameElement.firstChild);
  }
  fieldNameElement.appendChild(fieldNameElement.ownerDocument.createTextNode(fieldName));
}

इस तरह से करने के फायदे:

1. यह केवल DOM का उपयोग करता है, इसलिए तकनीक अन्य भाषाओं के लिए पोर्टेबल है, और गैर-मानक इनर HTML पर निर्भर नहीं है
2. फ़ील्डनाम में HTML हो सकता है, जो एक XSS हमले का प्रयास हो सकता है। अगर हमें पता है कि यह केवल पाठ है, तो हमें HTML के लिए ब्राउज़र पार्स करने के बजाय एक टेक्स्ट नोड बनाना चाहिए

अगर मैं एक जावास्क्रिप्ट लाइब्रेरी का उपयोग करने जा रहा था, तो मैं jQuery का उपयोग करूँगा, और यह करूँगा:

  $("div#field_name").text(fieldName);

ध्यान दें कि @AnthonyWJones की टिप्पणी सही है: "field_name" विशेष रूप से वर्णनात्मक आईडी या परिवर्तनशील नाम नहीं है।

Comments

आप इस तकनीक को किन अन्य भाषाओं में पोर्ट कर सकते हैं?

— जॉन टोपले

DOM कार्यान्वयन वाली कोई भी भाषा इसका समर्थन करती है (और अधिकांश भाषाओं में DOM कार्यान्वयन होता है)।

— क्वेंटिन

यह अच्छा उत्तर है, खदान से बेहतर और सही उत्तर है। आप उदाहरण पर विचार करने पर विचार कर सकते हैं। 'fieldname' फ़ंक्शन के पैरामीटर के लिए एक अच्छा नाम नहीं है। वास्तव में तत्व आईडी के लिए दो एक और सामग्री के लिए दूसरा लेना सबसे अच्छा हो सकता है, अर्थात; एलएमआईडी, सामग्री

— एंथनीवजोन 16

मैंने फ़ील्डनेम और आईडी को प्रश्न से ही उधार लिया था।

— डैनियल पापासियन

उदाहरण जेनेरिक बनाने के लिए प्रश्न ने शायद field_name का उपयोग किया है। साथ ही प्रश्नकर्ता ने उल्लेख किया कि प्रोटोटाइप उपलब्ध है लेकिन jQuery नहीं।

— जॉन टॉपले

Answer 5

$('field_name').innerHTML = 'Your text.';

प्रोटोटाइप की एक विशेषता यह है कि $('field_name') है कि जैसा काम करता है document.getElementById('field_name')। इसका इस्तेमाल करें! :-)

प्रोटोटाइप के updateफ़ंक्शन का उपयोग करके जॉन टॉपले का जवाब एक और अच्छा समाधान है।

Comments

यह जावास्क्रिप्ट की तरह नहीं दिखता है?

— मिलान बाबूसकोव

भीतरी HTML का उपयोग न करें। यह एक w3c सिफारिश नहीं है और असंगत व्यवहार करता है। इसे खराब स्टाइल माना जाता है।

— टॉम

टॉम, इसके बजाय क्या उपयोग किया जाना चाहिए (यदि आप प्रोटोटाइप का उपयोग नहीं करते हैं)?

— मिलान बाबूसकोव

मिलान, अधिक स्वीकृत तरीका चाइल्डनोड्स के माध्यम से लूप करना है, प्रत्येक पर removeNode (ट्रू) को कॉल करें, फिर document.createElement () या document.createTextNode () का उपयोग करके बनाए गए नए नोड्स जोड़ें। यदि आपको ऐसा करने की आवश्यकता है, तो मैं बहुत टाइपिंग से बचने के लिए फ़ंक्शन लिखने की सलाह दूंगा।

— जोएल अनयर

@RaduSimionescu नहीं, यह नहीं है। यह प्रश्न और उत्तर Prototype.js के बारे में है, jQuery के नहीं। प्रोटोटाइप $में आईडी द्वारा एक आइटम दिखता है। यह चयनकर्ता-आधारित नहीं है जैसे jQuery है। api.prototypjs.org/dom/dollar

— ceejayoz

Answer 6

त्वरित उत्तर इनर HTML (या प्रोटोटाइप की अपडेट पद्धति का उपयोग करना है जो बहुत ही समान है)। आंतरिक HTML के साथ समस्या यह है कि आपको सौंपी जाने वाली सामग्री से बचना होगा। अपने लक्ष्यों के आधार पर आपको अन्य कोड के साथ ऐसा करने की आवश्यकता होगी

IE में: -

document.getElementById("field_name").innerText = newText;

एफएफ में: -

document.getElementById("field_name").textContent = newText;

(वास्तव में एफएफ में कोड के अनुसार निम्नलिखित मौजूद है)

HTMLElement.prototype.__defineGetter__("innerText", function () { return this.textContent; })

HTMLElement.prototype.__defineSetter__("innerText", function (inputText) { this.textContent = inputText; })

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

Answer 7

यदि आप वास्तव में चाहते हैं कि आप बस वहीं छोड़ दें जहाँ आप छोड़ चुके हैं, तो आप ऐसा कर सकते हैं:

if (fieldNameElement)
    fieldNameElement.innerHTML = 'some HTML';

Answer 8

नोडवैल्यू एक मानक DOM प्रॉपर्टी है जिसका आप उपयोग कर सकते हैं:

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById(field_name);
  if(fieldNameElement.firstChild)
    fieldNameElement.firstChild.nodeValue = "New Text";
}

Answer 9

el.innerHTML='';
el.appendChild(document.createTextNode("yo"));

Answer 10

यदि आप अपनी साइट पर बहुत सारे जावास्क्रिप्ट का उपयोग शुरू करने के लिए इच्छुक हैं, तो jQuery डोम के साथ खेलना बहुत सरल बनाता है।

http://docs.jquery.com/Manipulation

इसे उतना ही सरल बनाता है: $ ("# क्षेत्र-नाम")। पाठ ("कुछ नया पाठ");

Comments

प्रोटोटाइप में समान उपयोगिता कार्य हैं।

— सइयोजोज

Answer 11

यदि आप संरचना नहीं मान सकते हैं तो इनरटेक्स्ट का उपयोग करें - मौजूदा पाठ प्रदर्शन परीक्षण को अद्यतन करने के लिए पाठ # डेटा का उपयोग करें

Answer 12

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById(field_name);

  fieldNameElement.removeChild(fieldNameElement.firstChild);
  var newText = document.createTextNode("New Text");
  fieldNameElement.appendChild(newText);
}

Comments

नोड को बदलने के लिए फिर इसे हटाने और दो अलग-अलग ऑपरेशनों के रूप में एक नया जोड़ने के लिए बेहतर है।

— क्वेंटिन

Answer 13

यहाँ एक आसान jQuery तरीका है:

var el = $('#yourid .yourclass');

el.html(el.html().replace(/Old Text/ig, "New Text"));

Comments

यह एक बुरे विचार की तरह लगता है - क्या होगा यदि आपके तत्व में एक ही पाठ के साथ सबनॉड्स होते हैं, या आपका पाठ एक तत्व टैग नाम के भाग से मेल खाता है? वे सिर्फ .text का उपयोग क्यों नहीं करते?

— जेम्स वेस्टगेट

मैं जेम्स वेस्टगेट से पूरी तरह सहमत हूं, ऐसा नहीं करना चाहिए।

— TGarrett

Answer 14

HTML में इसे डालें

<div id="field_name">TEXT GOES HERE</div>

जावास्क्रिप्ट में यह डाल दिया

var fieldNameElement = document.getElementById('field_name');
        if (fieldNameElement)
        {fieldNameElement.innerHTML = 'some HTML';}