'इनर टेक्स्ट' IE में काम करता है, लेकिन फ़ायरफ़ॉक्स में नहीं


289

मेरे पास कुछ जावास्क्रिप्ट कोड हैं जो IE में काम करते हैं जिनमें निम्नलिखित शामिल हैं:

myElement.innerText = "foo";

हालांकि, ऐसा लगता है कि फ़ायरफ़ॉक्स में 'इनरटेक्स्ट' संपत्ति काम नहीं करती है। क्या कुछ फ़ायरफ़ॉक्स समतुल्य है? या क्या अधिक सामान्य, क्रॉस ब्राउज़र संपत्ति है जिसका उपयोग किया जा सकता है?


3
इसे करना चाहिए myElement.innerHTML = "foo";
स्टेफिता

वह सभी HTML को ऑब्जेक्ट के भीतर आपूर्ति किए गए मान से बदल देगा।
OMG पोंजी

24
यह वह जगह है जहाँ पुस्तकालय जैसे jQuery जीवन को आसान बनाते हैं क्योंकि वे एक मानक ढांचे का उपयोग करने के लिए आपको सक्षम करके इस तरह क्रॉस-ब्राउज़र असंगतताओं का ख्याल रखते हैं।
दान डिप्लो

लेकिन फिर भी अगर आपकी देखभाल करने के लिए कोई HTML नहीं है तो यह संभव है।
एलेक्स पोलो

21
तो हमें बताएं कि इस क्रॉस-ब्राउज़र विकल्प का उपयोग केवल यह कहने के बजाय कि यह कैसे संभव है (जो रचनात्मक नहीं है)।
सासक्यू

जवाबों:


249

फ़ायरफ़ॉक्स W3C-compliant textContent प्रॉपर्टी का उपयोग करता है ।

मुझे लगता है कि सफारी और ओपेरा भी इस संपत्ति का समर्थन करते हैं।



2
@ याकूब 22 फरवरी, 2016 तक यह अभी भी नहीं है।
क्रिलगर

@krillgar यह फ़ायरफ़ॉक्स 45 के लिए निर्धारित है, 8 मार्च के रिलीज़ होने वाले सप्ताह के कारण। यह पहले से ही वर्तमान बीटा रिलीज़ में है, और थोड़ी देर के लिए औरोरा में रहा है। व्यावहारिक रूप से इसका मतलब यह है कि आप innerTextकेवल साइटों का उपयोग करके विकास शुरू कर सकते हैं और उम्मीद कर सकते हैं कि यह निकट भविष्य में सभी मौजूदा ब्राउज़रों पर काम कर सके (और संभव है और पुराने-आईई भी)।
बॉब

1
FTR: innerTextहै गहराई से अलग से textContent, और वास्तव में बहुत उपयोगी (आश्चर्यजनक एक प्रकल्पित आईई मोड़ ... से) है: innerTextकी कोशिश करता है कि कैसे पाठ है एक सन्निकटन देने के लिए वास्तव में प्रस्तुत पूरी तरह से विपरीत, ब्राउज़र में textContent, जो सिर्फ के बारे में रिटर्न tag- छीन लिया गया मार्कअप स्रोत , थोड़ा मूल्य, या अतिरिक्त समस्याएँ जोड़ना (जैसे शब्द सीमाओं का नुकसान)।
एस.जे.

इनरटेक्स्ट अभी भी 2019 में 64 संस्करण पर समर्थन नहीं करता है।
टोनी डोंग

285

अद्यतन : मैंने एक ब्लॉग पोस्ट लिखा है जिसमें सभी मतभेदों को बेहतर बताया गया है।


फ़ायरफ़ॉक्स W3C मानक का उपयोग करता है Node::textContent, लेकिन इसका व्यवहार MSHTML के स्वामित्व से "थोड़ा" अलग है innerText(ओपेरा द्वारा कॉपी किया गया है, कुछ समय पहले, दर्जनों अन्य MSHTML सुविधाओं के बीच)।

सबसे पहले, textContentव्हाट्सएप प्रतिनिधित्व एक से अलग है innerText। दूसरा, और अधिक महत्वपूर्ण बात, textContent SCRIPT टैग सामग्री के सभी शामिल हैं , जबकि इनरटेक्स्ट नहीं है।

बस चीजों को और अधिक मनोरंजक बनाने के लिए, ओपेरा - मानक को लागू करने के अलावा textContent- MSHTML को भी जोड़ने का फैसला किया, innerText लेकिन इसे कार्य करने के लिए बदल दियाtextContent - यानी जिसमें SCRIPT सामग्री (वास्तव में, textContentऔर innerTextओपेरा में समान परिणाम उत्पन्न होते हैं, शायद एक-दूसरे के लिए उपनाम के रूप में) ।

textContentNodeइंटरफ़ेस का हिस्सा है , जबकि innerTextका हिस्सा है HTMLElement। उदाहरण के लिए, इसका मतलब है कि आप "पुनः प्राप्त" कर सकते हैं textContentलेकिन innerTextटेक्स्ट नोड्स से नहीं :

var el = document.createElement('p');
var textNode = document.createTextNode('x');

el.textContent; // ""
el.innerText; // ""

textNode.textContent; // "x"
textNode.innerText; // undefined

अंत में, सफारी 2.x में छोटी गाड़ी का innerTextकार्यान्वयन भी है । सफ़ारी में, innerTextठीक से काम करता है अगर कोई तत्व न तो छिपा हुआ है (के माध्यम से style.display == "none") और न ही दस्तावेज़ से अनाथ है। अन्यथा, innerTextएक रिक्त स्ट्रिंग में परिणाम।

मैं textContentअमूर्त (इन कमियों के आसपास काम करने के लिए) के साथ खेल रहा था , लेकिन यह जटिल निकला ।

आपको सबसे अच्छी शर्त यह है कि पहले अपनी सटीक आवश्यकताओं को परिभाषित करें और वहां से पालन करें। यह संभव है innerHTMLकि किसी तत्व के केवल टैग को छीनना संभव हो , बल्कि सभी संभव textContent/ innerTextविचलन से निपटना ।

एक और संभावना, ज़ाहिर है, DOM ट्री को चलना और पाठ नोड्स को पुन: एकत्रित करना है।


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

7
@ माइक - लेकिन ऐसा लगता है कि innerTextक्रोम में इसका उपयोग 60x धीमा है । jsperf.com/text-content/3
gblazex

8
textContentअब IE9 + में समर्थित है, लेकिन फ़ायरफ़ॉक्स अभी भी समर्थन नहीं करता है innerText(हालांकि उन्होंने outerHTMLकुछ दिन पहले IE-परिचय जोड़ा था)।
kangax

1
उन लोगों के लिए जिन्हें अभी भी IE8 का समर्थन करने की आवश्यकता है, Node.textContentयहां प्रगति में एक बहुत ही पूर्ण शिम है: github.com/usmonster/aight/blob/node-textcontent-shim/js/… (उम्मीद है कि जल्द ही aight में शामिल किया जाना है )।
नौ


83

यदि आपको केवल पाठ सामग्री सेट करने और पुनर्प्राप्त करने की आवश्यकता नहीं है, तो यहां एक तुच्छ डोम संस्करण है जिसे आप किसी भी ब्राउज़र पर उपयोग कर सकते हैं; इसके लिए IE इनर टेक्स्ट एक्सटेंशन या DOM लेवल 3 कोर टेक्स्टकॉन्टेंट प्रॉपर्टी की भी आवश्यकता नहीं है।

function setTextContent(element, text) {
    while (element.firstChild!==null)
        element.removeChild(element.firstChild); // remove all existing content
    element.appendChild(document.createTextNode(text));
}

जब तक जावास्क्रिप्ट में एक "! ==" ऑपरेटर होता है, मुझे लगता है कि दूसरी पंक्ति में ऑपरेटर बस होना चाहिए "! ="।
रेक्स

23
@RexE: जावास्क्रिप्ट में एक !==ऑपरेटर, का विलोम होता है ===। टाइप-संवेदी तुलना द्वारा उपयोग किया जाता है ===/ !==आमतौर पर ढीले तुलनाकर्ताओं के लिए बेहतर होता है ==/ !=
बोबिन्स

इंटरनेट एक्सप्लोरर में यह स्क्रिप्ट टैग के पाठ को सेट करने के लिए काम नहीं करता है (मैं उन्हें एक टेम्पलेट के लिए उपयोग कर रहा था)। आपने 'scriptTagElement.text =' मेरा टेम्पलेट {{यहाँ}}} सेट किया है;
क्रिस्टोफर तारकिनी

मुझे यह समझने में बहुत मेहनत करनी पड़ी कि आपने लूप का उपयोग क्यों किया (और मैं !==nullपूरी तरह से इसे छोड़ दूंगा ) लूप को बदलने के बजाय element.innerHTML=''(जो कि लूप के समान सटीक काम करने के लिए निर्दिष्ट है और फिर मुझे याद आया।) ।: टेबल में ( विरासत- ) IE ... ericvasilik.com/2006/07/code-karma.html हो सकता है कि मैं 'छिपे हुए ’के संक्षिप्त विवरण को जोड़ने का सुझाव दूं और amp lt की जगह ed साइड-इफ़ेक्ट’ का कभी भी दस्तावेजीकरण न किया जाए।createTextNode ? और उनके संबंधित एचटीएमएल चरित्र संस्थाओं के लिए जीटी इसे करने के लिए एक लिंक भी है सही व्यवहार होगा भव्य!
GitaarLAB

26

jQuery एक .text()विधि प्रदान करता है जिसका उपयोग किसी भी ब्राउज़र में किया जा सकता है। उदाहरण के लिए:

$('#myElement').text("Foo");

22

प्रकाश के के जवाब के अनुसार फ़ायरफ़ॉक्स इनर टेक्स्ट प्रॉपर्टी का समर्थन नहीं करता है। तो आप बस यह परीक्षण कर सकते हैं कि क्या उपयोगकर्ता एजेंट इस संपत्ति का समर्थन करता है और नीचे के अनुसार आगे बढ़ सकता है:

function changeText(elem, changeVal) {
    if (typeof elem.textContent !== "undefined") {
        elem.textContent = changeVal;
    } else {
        elem.innerText = changeVal;
    }
}

2
'टेक्स्टकॉन्टेंट' इन एलएम सरल होगा
जेमी

if (elem.textContent! = null) भी आसान होगा!
एल्म्यू

14

जावास्क्रिप्ट की वास्तव में सरल रेखा सभी मुख्य ब्राउज़रों में "गैर-टैगिंग" पाठ प्राप्त कर सकती है ...

var myElement = document.getElementById('anyElementId');
var myText = (myElement.innerText || myElement.textContent);

2
उस एक के साथ एक समस्या है (कम से कम IE8 में): अगर इनरटेक्स्ट खाली स्ट्रिंग है और textContent अपरिभाषित है तो (myElement.innerText || myElement.textContent) अपरिभाषित हो जाता है।
मैग्नस

1
अच्छी तरह से बग @Magnus द्वारा नोट के रूप में रूप में, यह भी सच है देखते हैं कि के बारे में पता किया जा रहा लायक है कैसे में महत्वपूर्ण अंतर textContentऔर innerTextरिपोर्ट खाली स्थान के कि कुछ उपयोग के मामलों के लिए कोई फर्क कर सकते हैं।
मार्क अमेरी

2
बस एक और जोड़ें ||, यानी: var myText = (myElement.innerText || myElement.textContent || "") ;अपरिभाषित मूल्य पर काबू पाने के लिए।
पीटरम डे

6

ध्यान दें कि Element::innerTextसंपत्ति में वह पाठ नहीं होगा जो display:noneGoogle Chrome में CSS शैली " " द्वारा छिपाया गया है (साथ ही साथ वह अन्य सीएसएस टेकनीक द्वारा फंसे हुए कंटेंट को छोड़ देगा (फ़ॉन्ट-आकार सहित: 0, रंग: पारदर्शी, और) कुछ अन्य समान प्रभाव जो पाठ को किसी भी दृश्य तरीके से प्रस्तुत नहीं करने का कारण बनते हैं)।

अन्य CSS गुणों पर भी विचार किया जाता है:

  • पहले "प्रदर्शन:" आंतरिक तत्वों की शैली को यह निर्धारित करने के लिए पार्स किया जाता है कि क्या यह एक ब्लॉक सामग्री (जैसे "प्रदर्शन: ब्लॉक" का परिसीमन करता है, जो ब्राउज़र की अंतर्निहित स्टाइलशीट में HTML ब्लॉक तत्वों का डिफ़ॉल्ट है, और जिसका व्यवहार अधिक नहीं है। अपनी खुद की सीएसएस शैली); यदि ऐसा है तो इनरटेक्स्ट संपत्ति के मूल्य में एक नई रूपरेखा सम्मिलित की जाएगी। यह TextContent प्रॉपर्टी के साथ नहीं होगा।
  • इनलाइन सामग्री उत्पन्न करने वाले सीएसएस गुणों पर भी विचार किया जाएगा: उदाहरण के लिए इनलाइन तत्व <br \>जो इनलाइन न्यूलाइन उत्पन्न करता है, वह इनरटेक्स्ट के मूल्य में एक नई लाइन भी उत्पन्न करेगा।
  • "प्रदर्शन: इनलाइन" शैली टेक्स्टकॉन्टेंट या इनरटेक्स्ट में या तो कोई नई रेखा नहीं बनाती है।
  • "डिस्प्ले: टेबल" स्टाइल टेबल के चारों ओर और टेबल की पंक्तियों के बीच में नई सुर्खियाँ बनाता है, लेकिन "डिस्प्ले: टेबल-सेल" एक टैब कैरेक्टर उत्पन्न करेगा।
  • "स्थिति: निरपेक्ष" संपत्ति (प्रदर्शन के साथ प्रयोग: ब्लॉक या प्रदर्शन: इनलाइन, इससे कोई फर्क नहीं पड़ता) भी एक लाइन ब्रेक डालने का कारण होगा।
  • कुछ ब्राउज़रों में स्पैन के बीच एक सिंगल स्पेस सेपरेशन भी शामिल होगा

लेकिन Element::textContentफिर भी लागू किए गए सीएसएस के आंतरिक पाठ तत्वों की सभी सामग्री स्वतंत्र रूप से होगी, भले ही वे अदृश्य हों। और TextContent में कोई अतिरिक्त नयालाइन या व्हाट्सएप उत्पन्न नहीं किया जाएगा, जो सभी शैलियों और संरचना और इनलाइन / ब्लॉक या आंतरिक प्रकारों को तैनात करता है।

माउस चयन का उपयोग करते हुए कॉपी / पेस्ट ऑपरेशन क्लिपबोर्ड में डाले गए सादे-पाठ प्रारूप में छिपे हुए पाठ को छोड़ देगा, इसलिए इसमें सब कुछ शामिल नहीं होगा textContent, लेकिन केवल वही है जो innerText(व्हाट्सएप / न्यूलाइन पीढ़ी के बाद के रूप में) ।

दोनों गुण तब Google Chrome में समर्थित हैं, लेकिन उनकी सामग्री तब भिन्न हो सकती है। पुराने ब्राउज़रों में अभी भी सब कुछ शामिल है जैसे कि टेक्स्टकॉन्टेंट में अब सब कुछ शामिल है (लेकिन व्हाट्सएप / नईलाइन्स की पीढ़ी के संबंध में उनका व्यवहार असंगत था)।

jQuery इन असंगतताओं को ब्राउज़र के बीच ".text ()" विधि का उपयोग करके हल करेगा, जो कि एक $ () क्वेरी के माध्यम से लौटाए गए तत्वों में जोड़ा गया है। आंतरिक रूप से, यह केवल "नोड" स्तर के साथ काम करते हुए, HTML डोम को देखकर कठिनाइयों का हल करता है। तो यह मानक textContent की तरह लग रही कुछ वापस कर देगा।

चेतावनी यह है कि यह jQuery विधि किसी भी अतिरिक्त रिक्त स्थान या लाइन विराम को सम्मिलित नहीं करेगी <br />जो सामग्री के सबलेमेंट्स (जैसे ) के कारण स्क्रीन पर दिखाई दे सकती है।

यदि आप एक्सेसिबिलिटी के लिए कुछ स्क्रिप्ट डिज़ाइन करते हैं और आपकी स्टाइलशीट नॉन-ऑरल रेंडरिंग के लिए पार्स की जाती है, जैसे कि ब्रेल रीडर के साथ संवाद करने के लिए उपयोग किए जाने वाले प्लगइन्स, इस टूल को टेक्स्टकॉन्टेंट का उपयोग करना चाहिए, यदि इसमें स्पैन के साथ स्टाइल किए गए विशिष्ट विराम चिह्न शामिल होने चाहिए। "प्रदर्शन: कोई नहीं" और वह आमतौर पर पृष्ठों में शामिल हैं (उदाहरण के लिए सुपरस्क्रिप्ट / सदस्यता के लिए), अन्यथा इनरटेक्स्ट ब्रेल रीडर पर बहुत भ्रमित होगा।

CSS ट्रिक्स द्वारा छिपाए गए ग्रंथों को आमतौर पर प्रमुख खोज इंजन द्वारा अनदेखा किया जाता है (जो आपके HTML पृष्ठों के CSS को भी पार्स कर देगा, और HTML / CSS पार्सर और DOM संपत्ति का उपयोग करके उन ग्रंथों को भी अनदेखा कर देगा जो पृष्ठभूमि पर रंगों के विपरीत नहीं हैं) "इनरटेक्स्ट" बिल्कुल आधुनिक दृश्य ब्राउज़रों की तरह (कम से कम इस अदृश्य सामग्री को अनुक्रमित नहीं किया जाएगा ताकि छिपे हुए पाठ का उपयोग पृष्ठ में कुछ कीवर्ड को अपनी सामग्री की जांच करने के लिए बाध्य करने के लिए एक चाल के रूप में नहीं किया जा सके); लेकिन इस छिपे हुए पाठ को परिणाम पृष्ठ में प्रदर्शित किया जाएगा (यदि पृष्ठ अभी भी परिणाम में शामिल किए जाने वाले सूचकांक से योग्य था), तो अतिरिक्त शैलियों और लिपियों को हटाने के लिए पूर्ण HTML के बजाय "textContent" संपत्ति का उपयोग करें।

यदि आप इन दोनों गुणों में से किसी एक में कुछ सादा-पाठ असाइन करते हैं, तो यह आंतरिक मार्कअप और उस पर लागू शैलियों को अधिलेखित कर देगा (केवल निर्दिष्ट तत्व ही इसके प्रकार, गुण और शैली को रखेगा), इसलिए दोनों गुणों में तब समान सामग्री होगी । हालाँकि, कुछ ब्राउज़र अब इनरटेक्स्ट को लिखने का सम्मान नहीं करेंगे, और आपको केवल टेक्स्टकॉन्टेंट संपत्ति को अधिलेखित करने देंगे (आप इन गुणों को लिखते समय HTML मार्कअप नहीं डाल सकते हैं, क्योंकि HTML विशेष वर्णों का शाब्दिक रूप से प्रकट होने के लिए संख्यात्मक चरित्र संदर्भों का उपयोग करके ठीक से एन्कोड किया जाएगा। , यदि आप तब या innerHTMLके असाइनमेंट के बाद संपत्ति पढ़ते हैं ।innerTexttextContent


1
वास्तव में "फ़ॉन्ट-आकार: 0", "रंग: पारदर्शी", "अस्पष्टता: 0", "पाठ-इंडेंट: -9999px", आदि सभी क्रोम / वेबकीट में शामिल हैं innerText। मेरे परीक्षणों में, केवल "प्रदर्शन: कोई नहीं" और "दृश्यता: छिपा हुआ" को अनदेखा किया जाता है।
kangax

5
myElement.innerText = myElement.textContent = "foo";

संपादित करें (नीचे टिप्पणी के लिए मार्क एमी के लिए धन्यवाद): केवल इस तरह से करें यदि आप एक उचित संदेह से परे जानते हैं कि इन गुणों के अस्तित्व की जांच करने पर कोई कोड निर्भर नहीं करेगा, जैसे (उदाहरण के लिए) jQuery करता है। लेकिन अगर आप jQuery का उपयोग कर रहे हैं, तो आप शायद "टेक्स्ट" फ़ंक्शन का उपयोग करेंगे और $ ('# myElement') का उपयोग करेंगे। टेक्स्ट ('foo') कुछ अन्य उत्तर दिखाते हैं।


4
-1; यह विचार अच्छा नहीं है। यह कोड के लिए अत्यंत सामान्य है - जिसमें jQuery जैसी पुस्तकालयों में कोड भी शामिल है - यह देखने के लिए कि कौन सा उपयोग करना है, यह तय करने के लिए innerTextया textContentगुणों के अस्तित्व की जांच करें। दोनों को एक स्ट्रिंग पर सेट करके, आप तत्व पर अन्य लोगों के कोड को गलती से पहचान लेंगे कि ब्राउज़र दोनों गुणों का समर्थन करता है; परिणामस्वरूप वह कोड दुर्व्यवहार के लिए उत्तरदायी है।
मार्क अमेरी

JQuery $ ('# myElement')। val () क्रॉस ब्राउज़र के लिए काम करता है।
टोनी डोंग

4

innerTextफ़ायरफ़ॉक्स में जोड़ा गया है और FF45 रिलीज में उपलब्ध होना चाहिए: https://bugzilla.mozilla.org/show_bug.cgi?id=264412

एक मसौदा कल्पना लिखी गई है और भविष्य में HTML जीवन स्तर में शामिल होने की उम्मीद है: http://rocallahan.github.io/innerText-spec/ , https://github.com/whatwg/html/issues/ 465

ध्यान दें कि वर्तमान में फ़ायरफ़ॉक्स, क्रोम और IE कार्यान्वयन सभी असंगत हैं। आगे बढ़ते हुए, हम संभवतः फ़ायरफ़ॉक्स, क्रोम और एज की अपेक्षा कर सकते हैं जबकि पुराने IE के असंगत बने रहने के लिए अभिसरण करें।

इसे भी देखें: https://github.com/whatwg/compat/issues/5


क्या कोई पॉलीफ़िल उपलब्ध है?
सर्व-इंक

1
@user यह वास्तव में आप की जरूरत पर निर्भर करता है। यदि आपको फ़ायरफ़ॉक्स के पुराने संस्करणों का समर्थन करने की आवश्यकता नहीं है और कार्यान्वयन में मामूली अंतर की परवाह नहीं है, तो बस उपयोग करें innerText। यदि textContentएक स्वीकार्य गिरावट है और आपको पुराने एफएक्स का समर्थन करने की आवश्यकता है, तो उपयोग करें (innerText || textContent)। यदि आप सभी ब्राउज़रों में समान कार्यान्वयन चाहते हैं, तो मेरा मानना ​​है कि इसके लिए कोई विशिष्ट पॉलीफ़िल नहीं है, लेकिन कुछ चौखटे (जैसे jQuery) पहले से ही कुछ समान लागू कर सकते हैं - इस पृष्ठ पर अन्य उत्तरों को देखें।
बॉब

1
की कार्यक्षमता innerText, यह है: फ़ायरफ़ॉक्स में एक पृष्ठ पर दृश्य पाठ> = 38 (एक ऐडऑन के लिए) कम से कम, <script>टैग पूरी तरह से छोड़ा जाना चाहिए। jQuery $('#body').text()ने मेरे लिए काम नहीं किया। लेकिन एक समाधान के रूप innerText || textContentमें ठीक है। धन्यवाद।
सर्व-इंक

@ यूसर, यदि आपको Fx 38 का समर्थन करने की आवश्यकता है, तो यह उत्तर वास्तव में लागू नहीं होता है। आपको अभी के लिए सीमाओं / अंतरों के साथ रहना होगा textContent
बॉब

1

इस तरह के किसी चीज़ के बारे में क्या?

//$elem is the jQuery object passed along.

var $currentText = $elem.context.firstChild.data.toUpperCase();

** मुझे अपना अपरकेस बनाने की जरूरत है।


1
बकवास समाधान; यह काम नहीं करता है यदि तत्व में एकल पाठ नोड से अधिक कुछ भी हो।
मार्क अमेरी

1

2016 में फ़ायरफ़ॉक्स v45 से, innerTextफ़ायरफ़ॉक्स पर काम करता है, इसके समर्थन पर एक नज़र डालें: http://caniuse.com/#search==nernerext

यदि आप इसे फ़ायरफ़ॉक्स के पिछले संस्करणों पर काम करना चाहते हैं, तो आप उपयोग कर सकते हैं textContent, जिसका फ़ायरफ़ॉक्स पर बेहतर समर्थन है , लेकिन पुराने IE संस्करणों पर बदतर : http://caniuse.com/#search=textContent


0

इस के साथ मेरा अनुभव रहा है innerText, textContent, innerHTML, और मूल्य:

// elem.innerText = changeVal;  // works on ie but not on ff or ch
// elem.setAttribute("innerText", changeVal); // works on ie but not ff or ch
// elem.textContent = changeVal;  // works on ie but not ff or ch
// elem.setAttribute("textContent", changeVal);  // does not work on ie ff or ch
// elem.innerHTML = changeVal;  // ie causes error - doesn't work in ff or ch
// elem.setAttribute("innerHTML", changeVal); //ie causes error doesn't work in ff or ch
   elem.value = changeVal; // works in ie and ff -- see note 2 on ch
// elem.setAttribute("value", changeVal); // ie works; see note 1 on ff and note 2 on ch

यानी = इंटरनेट एक्सप्लोरर, ff = फ़ायरफ़ॉक्स, ch = google chrome। नोट 1: ff तब तक काम करता है जब तक बैकस्पेस के साथ मान नहीं हट जाता - ऊपर रे रेगा द्वारा नोट देखें। नोट 2: क्रोम में कुछ हद तक काम करता है - अपडेट के बाद यह अपरिवर्तित होता है, फिर आप दूर जाते हैं और फ़ील्ड में वापस क्लिक करते हैं और मान प्रकट होता है। बहुत कुछ सबसे अच्छा है elem.value = changeVal; जो मैंने ऊपर टिप्पणी नहीं की।


1
यह सिर्फ मैं हूँ ? या अचानक ओपी प्रश्न को नजरअंदाज करते हैं? उन्होंने इनर टेक्स्ट / टेक्स्टकॉन्टेंट के लिए कहा, और आप ज्यादातर इनपुट के बारे में बात कर रहे हैं।
१६:१६ पर दीमनिक

इस उत्तर को पढ़ना बहुत कठिन है। दूसरी ओर, मैं आश्वस्त नहीं हूं कि सामग्री का इतना मूल्य है कि वह उसे ख़त्म करने लायक है।
मार्क अमेरी

-1

मूल पोस्ट के तहत टिप्पणियों से बस reposting। innerHTML सभी ब्राउज़रों में काम करता है। धन्यवाद स्टेफिता।

myElement.innerHTML = "फू";


1
-1; / के innerHTMLलिए पर्याप्त प्रतिस्थापन नहीं है textContent/ innerTextजब तक आप यह निश्चित नहीं कर सकते हैं कि आप जिस पाठ को असाइन कर रहे हैं, उसमें कोई टैग या अन्य HTML सिंटैक्स नहीं है। उपयोगकर्ता द्वारा प्रदान किए गए किसी भी डेटा के लिए, आपके पास निश्चित रूप से वह गारंटी नहीं है। इस दृष्टिकोण को बिना चेतावनी के धक्का देना खतरनाक है क्योंकि इससे XSS सुरक्षा छेद हो सकते हैं । इतने सारे सुरक्षित तरीकों के उपलब्ध होने के कारण, इस पर विचार करने का कोई कारण नहीं है।
मार्क अमेरी

मार्क, मेरी समझ यह है कि html, div, span, p जैसे html एलिमेंट्स में डेटा लिखने का एक सामान्य तरीका है। मैं इसे JSON डेटा वापस संसाधित करने के लिए उपयोग करता हूं। यह JQuery में भी है ...
लियोनिद अल्ज़िन

1
यदि आपको JSON प्रतिक्रिया से एक मनमाना स्ट्रिंग मिलती है और इसे एक तत्व को असाइन किया जाता है .innerHTML, तो आपका कोड टूट गया है और आप संभावित रूप से XSS के लिए असुरक्षित हैं। क्या होता है अगर वह स्ट्रिंग है "<script>alert(1)</script>"?
मार्क अमेरी

1
@MarkAmery: HTML5 निर्दिष्ट करता है कि जिस <script>टैग को डाला गया है, innerHTMLउसे निष्पादित नहीं करना चाहिए। लेकिन यह पुराने ब्राउज़रों की सुरक्षा नहीं करता है। इसके अलावा, HTML5 innerHTMLउदाहरण के लिए सुरक्षित नहीं होगा "<img src='x' onerror='alert(1)'>"
गीतालीब

-1

यहाँ यह पाया:

<!--[if lte IE 8]>
    <script type="text/javascript">
        if (Object.defineProperty && Object.getOwnPropertyDescriptor &&
            !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get)
          (function() {
            var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
            Object.defineProperty(Element.prototype, "textContent",
              { // It won't work if you just drop in innerText.get
                // and innerText.set or the whole descriptor.
                get : function() {
                  return innerText.get.call(this)
                },
                set : function(x) {
                  return innerText.set.call(this, x)
                }
              }
            );
          })();
    </script>
<![endif]-->

कुछ स्पष्टीकरण अच्छा होगा! इसके अलावा, यहाँ कुछ अजीब गंदगी है; IE के लिए निष्पादन को प्रतिबंधित करने के लिए सशर्त टिप्पणी का उपयोग क्यों करें> = 8, केवल IE 8 को लक्षित करने के बजाय, जब IE> = 9 मूल रूप से समर्थन करते हैंtextContent ? यह भी ध्यान देने योग्य है कि चूंकि innerTextऔर textContentअलग-अलग व्यवहार हैं, इसलिए उपरोक्त कोड एक वफादार textContentशिम नहीं है - यह संभवतः महत्वपूर्ण है, लेकिन जरूरी नहीं कि स्पष्ट हो!
मार्क अमेरी

दोष को इंगित करने के लिए धन्यवाद, यह आईई <= 8 होने का लक्ष्य था
सिमोनारमे

-2

innerTextअन्य ब्राउज़रों में व्यवहार का अनुकरण करना भी संभव है:

 if (((typeof window.HTMLElement) !== "undefined") && ((typeof HTMLElement.prototype.__defineGetter__) !== "undefined")) {
     HTMLElement.prototype.__defineGetter__("innerText", function () {
         if (this.textContent) {
             return this.textContent;
         } else {
             var r = this.ownerDocument.createRange();
             r.selectNodeContents(this);
             return r.toString();
         }
     });
     HTMLElement.prototype.__defineSetter__("innerText", function (str) {
         if (this.textContent) {
             this.textContent = str;
         } else {
             this.innerHTML = str.replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g, '&lt;').replace(/\n/g, "<br />\n");
         }
     });
 }

बस मेरे सिर के ऊपर से समस्याओं की तलाश में, सेटर को preएस के लिए तोड़ दिया गया है क्योंकि यह नए सिरे से डबल-अप करेगा। मुझे संदेह है कि यहां और भी गलत है।
मार्क अमेरी
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.