इनर टेक्स्ट और इनरएचटीएमएल के बीच अंतर

Question

बीच क्या अंतर है innerHTML, innerTextऔर childNodes[].valueजावास्क्रिप्ट में?

Comments

@tymeJV ईमानदारी से, innerTextMSIE द्वारा textContext के एक गैर-मानक कार्यान्वयन के साथ अंतर , गैर-तुच्छ है।

— fny

फ़ायरफ़ॉक्स में काम नहीं करने वाले इनरटेक्स्ट के अलावा: टेक्स्टकॉन्टेंट सभी प्रमुख ब्राउज़रों में काम करता है, इसलिए इनर टेक्स्ट के बजाय टेक्स्ट कॉन्टेंट का उपयोग करें।

— Auco

महत्वपूर्ण नोट: उपरोक्त 3 टिप्पणियाँ अब मान्य नहीं हैं। innerTextमानकों में जोड़ा गया है और सभी प्रमुख ब्राउज़रों द्वारा समर्थित है। textContentअब IE> = 9 द्वारा समर्थित है और innerTextज्यादातर मामलों (बोनस, यह बहुत तेज है) के बजाय इस्तेमाल किया जा सकता है , लेकिन दोनों के बीच मतभेद हैं, इसलिए कुछ मामलों में आप उन्हें स्वैप नहीं कर सकते।

— राहिल हिलन

अपडेट 2019: innerTextसभी ब्राउज़रों में अच्छी तरह से समर्थित है। फ़ायरफ़ॉक्स ने संस्करण 45 से इसका समर्थन करना शुरू कर दिया। caniuse.com/#search=innertext

— आदित्य गुप्ता

मुझे आश्चर्य है कि यहां सुरक्षा को संबोधित नहीं किया गया है। innerHTML XSS हमलों के लिए एक ज्ञात भेद्यता है। कहा कि, innerText100% सुरक्षित भी नहीं है। stackoverflow.com/questions/52707031/does-innertext-prevent-xss blog.cloudboost.io/…

— davidhartman00

Answer 1

innerTextहालाँकि, इसके विपरीत , innerHTMLआप HTML रिच टेक्स्ट के साथ काम कर सकते हैं और टेक्स्ट को स्वचालित रूप से एनकोड और डीकोड नहीं कर सकते हैं। दूसरे शब्दों में, innerTextटैग की सामग्री को सादे पाठ के रूप में innerHTMLपुनर्प्राप्त और सेट करता है , जबकि HTML प्रारूप में सामग्री को पुनर्प्राप्त और सेट करता है।

Comments

यहां दिए गए उत्तर @ @ जोर की टिप्पणी को एक अन्य उत्तर में नीचे पेस्ट करना बहुत महत्वपूर्ण है: "बस स्पष्टता के लिए: यह केवल तब लागू होता है जब कोई मान सेट करता है। जब आप मान प्राप्त कर रहे होते हैं तो HTML टैग बस छीन लिए जाते हैं और आपको सादा पाठ मिलता है।"

— हेगिट

Answer 2

नीचे दिए गए उदाहरण निम्नलिखित HTML स्निपेट का उल्लेख करते हैं:

<div id="test">
   Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>

नोड को निम्नलिखित जावास्क्रिप्ट द्वारा संदर्भित किया जाएगा:

var x = document.getElementById('test');

element.innerHTML

तत्व के वंश का वर्णन करने वाले HTML सिंटैक्स को सेट या प्राप्त करता है

x.innerHTML
// => "
// =>   Warning: This element contains <code>code</code> and <strong>strong language</strong>.
// => "

यह W3C के DOM पार्सिंग और सीरियललाइज़ेशन स्पेसिफिकेशन का हिस्सा है । ध्यान दें कि यह Elementवस्तुओं की एक संपत्ति है ।

node.innerText

सेट या ऑब्जेक्ट के प्रारंभ और अंत टैग के बीच पाठ प्राप्त करता है

x.innerText
// => "Warning: This element contains code and strong language."

• innerTextMicrosoft द्वारा शुरू किया गया था और कुछ समय के लिए फ़ायरफ़ॉक्स द्वारा असमर्थित था। 2016 के अगस्त में innerTextकिया गया था WHATWG द्वारा अपनाई गई और v45 में फ़ायरफ़ॉक्स में जोड़ा गया था।
• innerText आपको एक शैली के बारे में जानकारी देता है, उस पाठ का प्रतिनिधित्व करता है जो मिलान करने की कोशिश करता है कि ब्राउज़र द्वारा इसका क्या अर्थ प्रस्तुत किया गया है:
  • innerTextलागू होता है text-transformऔर white-spaceनियम
  • innerText ट्रिम लाइनों के बीच सफेद स्थान और आइटम के बीच लाइन ब्रेक जोड़ता है
  • innerText अदृश्य वस्तुओं के लिए पाठ नहीं लौटाएगा
• innerTextऐसे textContentतत्वों के लिए वापस आएंगे जो कभी भी <style />और जैसे नहीं प्रदान किए जाते हैं
• Nodeतत्वों की संपत्ति

node.textContent

किसी नोड और उसके वंश की पाठ्य सामग्री को प्राप्त या सेट करता है।

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

जबकि यह W3C मानक है , यह IE <9 द्वारा समर्थित नहीं है।

• स्टाइल के बारे में पता नहीं है और इसलिए सीएसएस द्वारा छिपाई गई सामग्री लौटाएगा
• रिफ्लो को ट्रिगर नहीं करता (इसलिए अधिक प्रदर्शन करने वाला)
• Nodeतत्वों की संपत्ति

node.value

यह उस तत्व पर निर्भर करता है जिसे आपने लक्षित किया है। ऊपर के उदाहरण के लिए, xएक रिटर्न HTMLDivElement वस्तु है, जो एक नहीं है valueसंपत्ति को परिभाषित किया।

x.value // => null

इनपुट टैग ( <input />), उदाहरण के लिए, एक valueसंपत्ति को परिभाषित करते हैं , जो "नियंत्रण में वर्तमान मूल्य" को संदर्भित करता है।

<input id="example-input" type="text" value="default" />
<script>
  document.getElementById('example-input').value //=> "default"
  // User changes input to "something"
  document.getElementById('example-input').value //=> "something"
</script>

से डॉक्स :

नोट: कुछ इनपुट प्रकारों के लिए, लौटाया गया मान उस मूल्य से मेल नहीं खा सकता जो उपयोगकर्ता ने दर्ज किया है। उदाहरण के लिए, यदि उपयोगकर्ता गैर-संख्यात्मक मान में प्रवेश करता है <input type="number">, तो लौटाया गया मान बदले में एक रिक्त स्ट्रिंग हो सकता है।

नमूना स्क्रिप्ट

यहां एक उदाहरण दिया गया है जो ऊपर प्रस्तुत HTML के लिए आउटपुट दिखाता है:

var properties = ['innerHTML', 'innerText', 'textContent', 'value'];

// Writes to textarea#output and console
function log(obj) {
  console.log(obj);
  var currValue = document.getElementById('output').value;
  document.getElementById('output').value = (currValue ? currValue + '\n' : '') + obj; 
}

// Logs property as [propName]value[/propertyName]
function logProperty(obj, property) {
  var value = obj[property];
  log('[' + property + ']'  +  value + '[/' + property + ']');
}

// Main
log('=============== ' + properties.join(' ') + ' ===============');
for (var i = 0; i < properties.length; i++) {
  logProperty(document.getElementById('test'), properties[i]);
}

<div id="test">
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>
<textarea id="output" rows="12" cols="80" style="font-family: monospace;"></textarea>

Comments

यहां तक ​​कि फ़ायरफ़ॉक्स के सबसे हाल के संस्करणों का समर्थन नहीं करते हैं innerText: quirksmode.org/dom/html और quirksmode.org/dom/tests/innerhtml.html

— Jarno Lamberg

यह चार गुणों में से प्रत्येक (innerHTML, innerText, textContent, value) को दो सबहेडिंग में विभाजित करने में सहायक होगा: "व्यवहार" और "सेट" व्यवहार।

— ल्यूक हचिसन

Developer.mozilla.org/en-US/docs/Web/API/Node/innerText के अनुसार Firefox >=45समर्थित है।

— Kilmazing

अगर मैं एमडीएन को सही ढंग से समझता हूं , innerTextअब मानक का हिस्सा है और इसे फ़ायरफ़ॉक्स द्वारा संस्करण 45 से समर्थित किया जाना चाहिए; हो सकता है कि इस बेहतरीन जवाब के अपडेट के लिए @faraz

— domsson

यह भी <करने के लिए <, >करने के लिए >, आदि

— SarcasticSully

Answer 3

InnerTextप्रॉपर्टी html-एनकोड को कंटेंट, टर्निंग <p>टू <p>वगैरह। यदि आप एचटीएमएल टैग्स डालना चाहते हैं तो आपको इस्तेमाल करना होगा InnerHTML।

Comments

केवल स्पष्टता के लिए: यह केवल तब लागू होता है जब कोई मान सेट करता है। जब आप मान प्राप्त कर रहे हैं तो HTML टैग्स को केवल छीन लिया जाता है और आपको सादा पाठ मिलता है।

— जोर

Answer 4

सरल शब्दों में:

1. innerTextके रूप में मूल्य दिखाएगा और किसी भी HTMLस्वरूपण को अनदेखा करता है जिसे शामिल किया जा सकता है।
2. innerHTMLमूल्य दिखाएगा और किसी भी HTMLस्वरूपण को लागू करेगा ।

Answer 5

var element = document.getElementById("main");
var values = element.childNodes[1].innerText;
alert('the value is:' + values);

इसे और परिष्कृत करने और उदाहरण के लिए एलेक मान प्राप्त करने के लिए, अन्य .childNodes का उपयोग करें [1]

var element = document.getElementById("main");
var values = element.childNodes[1].childNodes[1].innerText;
alert('the value is:' + values);

Answer 6

के संदर्भ में MutationObservers, सेटिंग नोड को हटाने वाले ब्राउज़रों के कारण innerHTMLएक childListउत्परिवर्तन उत्पन्न करता है और फिर के मान के साथ एक नया नोड जोड़ता है innerHTML।

यदि आप सेट करते हैं innerText, तो एक characterDataउत्परिवर्तन उत्पन्न होता है।

Answer 7

के बीच एकमात्र अंतर innerTextऔर innerHTMLयह है कि innerTextस्ट्रिंग डालें क्योंकि यह तत्व में है, जबकि innerHTMLइसे html सामग्री के रूप में चलाएं।

const ourstring = 'My name is <b class="name">Satish chandra Gupta</b>.';
document.getElementById('innertext').innerText = ourstring;
document.getElementById('innerhtml').innerHTML = ourstring;

.name{
color:red;
}

<h3>Inner text below. It inject string as it is into the element.</h3>
<div id="innertext"></div>
<br />
<h3>Inner html below. It renders the string into the element and treat as part of html document.</h3>
<div id="innerhtml"></div>

Answer 8

InnerTextकेवल सादे पाठ में एक नई लाइन पर प्रत्येक तत्व के साथ पृष्ठ का पाठ मान लौटाएगा, जबकि टैग के innerHTMLअंदर सब कुछ की HTML सामग्री वापस कर देगा body, और childNodesनाम की सूची के अनुसार नोड्स की एक सूची लौटाएगा।

Answer 9

innerTextसंपत्ति रिटर्न वास्तविक पाठ , जबकि एक एचटीएमएल तत्व का मान innerHTMLदेता है HTML content। नीचे उदाहरण:

var element = document.getElementById('hello');
element.innerText = '<strong> hello world </strong>';
console.log('The innerText property will not parse the html tags as html tags but as normal text:\n' + element.innerText);

console.log('The innerHTML element property will encode the html tags found inside the text of the element:\n' + element.innerHTML);
element.innerHTML = '<strong> hello world </strong>';
console.log('The <strong> tag we put above has been parsed using the innerHTML property so the .innerText will not show them \n ' + element.innerText);
console.log(element.innerHTML);

<p id="hello"> Hello world 
</p>

Answer 10

सूची में जोड़ने के लिए, इनर टेक्स्ट आपके टेक्स्ट-ट्रांसफॉर्म, इनरएचटीएमएल वॉन्ट को रखेगा