पहले चाइल्ड को कैसे प्रारंभ करें ताकि मुझे "x.firstChild नल या ऑब्जेक्ट न हो"?

Question

मेरी JSP/HTML में मैं इस है:

<div id="exampleLabel"> </div> 

तब मेरे जावास्क्रिप्ट खंड में

मैं एक समारोह के इस तरह एक onclick से कहा जाता है,

function changeLabel(){ 
    exampleLabel.firstChild.nodeValue = 'LABEL HAS CHANGED'; 
} 

यह क्रोम में ठीक काम करता है, Firefox में कुछ नहीं करता है और IE में पृष्ठ पर त्रुटि कह

exampleLabel.firstChild अशक्त या नहीं एक वस्तु है प्रकट होता है।

ठीक है, मैं यह कोई firstChild ऐसा करने के लिए firstChild.ANYTHING एक एनपीई होगा की कोशिश कर रहा था कि ले जा सकते हैं, मैं भी ले जा सकते हैं जो अन्य ब्राउज़र बस इसे खुद को प्रारंभ नहीं है क्रोम की तरह स्पष्ट रूप से करता है।

प्रश्न यह है कि, मैं इसे स्वयं कैसे शुरू करूं ताकि मैं .nodeValue = "blahblah" पर जा सकूं?

Answer 1

कारण यह IE में काम नहीं करता है कि अन्य सभी प्रमुख ब्राउज़रों के विपरीत, यह अपने HTML में खाली स्थान के लिए पाठ नोड्स पैदा नहीं करता है, इसलिए है अपने <div> कि केवल एक अंतरिक्ष में कोई भी बच्चा नोड हैं शामिल अर्थात। मैं मैन्युअल रूप से टेक्स्ट नोड जोड़ने या मौजूदा को बदलने का सुझाव दूंगा।

इसके अलावा

, जब तक आप exampleLabel कहीं और घोषित कर दिया है, आप IE और क्रोम के एक गैर मानक और नहीं बल्कि को भावुक विशेषता यह है कि वैश्विक ऑब्जेक्ट के गुणों (यानी, आप उल्लेख कर सकते हैं करने के लिए डोम तत्वों की आईडी नक्शे पर भरोसा कर रहे हैं एक आईडी के रूप में एक चर के रूप में एक तत्व)। यह अन्य ब्राउज़रों में काम नहीं करता है। इसके बजाय आपको document.getElementById() का उपयोग करना चाहिए।

function changeLabel(labelText) { 
    var exampleLabel = document.getElementById('exampleLabel'); 
    var child = exampleLabel.firstChild; 
    if (!child) { 
     child = document.createTextNode(''); 
     exampleLabel.appendChild(child); 
    } 
    child.nodeValue = labelText; 
} 

changeLabel('LABEL HAS CHANGED'); 

Answer 2

टेक्स्ट नोड बनाएं और फिर इसे संलग्न करें।

function changeLabel(){ 
    var textNode = exampleLabel.firstChild; 
    if (!textNode) { 
     textNode = document.createTextNode('foo'); 
     exampleLabel.appendChild(textNode); 
    } 
    textNode.nodeValue = 'LABEL HAS CHANGED'; 
}