2011-12-29 14 views
23

की विधि 'appendChild' को कॉल नहीं कर सकता मैं जावास्क्रिप्ट (और सामान्य रूप से प्रोग्रामिंग) में नया हूं और डीओएम के साथ काम करने के लिए बुनियादी समझ पाने की कोशिश कर रहा हूं। क्षमा करें अगर यह एक बहुत ही मूल गलती है, लेकिन मैंने चारों ओर देखा और जवाब नहीं मिला।जावास्क्रिप्ट त्रुटि - शून्य

मैं नीचे की मूल HTML फ़ाइल में शीर्षक और कुछ अनुच्छेद पाठ जोड़ने के लिए appendChild विधि का उपयोग करने का प्रयास कर रहा हूं।

var newHeading = document.createElement("h1"); 
var newParagraph = document.createElement("p"); 

newHeading.innerHTML = "New Heading!"; 
newParagraph.innerHTML = "Some text for a paragraph."; 

document.getElementById("javascript").appendChild(newHeading); 
document.getElementById("javascript").appendChild(newParagraph); 

चल रहा है यह एक त्रुटि का कारण बनता है: "नल की विधि कॉल नहीं कर सकता 'appendChild'"

सहायता

<html> 
<head> 
    <title>JS Practice</title> 
</head> 
<body> 
    <script src="script.js"></script> 
    <div id = "main"> 
     <h1>Simple HTML Page</h1> 
     <p>This is a very simple HTML page.</p> 
     <p>It's about as basic as they come. It has: </p> 
     <ul> 
      <li>An H1 Tag</li> 
      <li>Two paragraphs</li> 
      <li>An unordered list</li> 
     </ul> 
    </div> 
    <div id="javascript"> 
    </div> 
</body> 
</html> 

यहाँ js कोड है? मैं यह नहीं समझ सकता कि यह क्यों काम नहीं कर रहा है ...

उत्तर

50

इस कोड को मान लिया जाये कि script.js फ़ाइल के अंदर है, इस वजह से जावास्क्रिप्ट से पहले HTML पृष्ठ के बाकी लोड होते ही चल रहा है।

जब कोई HTML पृष्ठ लोड होता है, जब यह एक जावास्क्रिप्ट फ़ाइल जैसे किसी लिंक किए गए संसाधन में आता है, तो वह उस संसाधन को लोड करता है, यह सभी कोड निष्पादित करता है, और फिर पृष्ठ को जारी रखता है। तो <div> पृष्ठ पर लोड होने से पहले आपका कोड चल रहा है।

पृष्ठ के निचले हिस्से में अपना <script> टैग ले जाएं और आपको अब त्रुटि नहीं होनी चाहिए। वैकल्पिक रूप से, <body onload="doSomething();"> जैसे किसी ईवेंट को प्रस्तुत करें और फिर अपनी जावास्क्रिप्ट फ़ाइल में doSomething() विधि बनाएं जो उन कथनों को चलाएगा।

7

आपकी स्क्रिप्ट तत्व उपलब्ध होने से पहले चल रही है।

बंद होने से पहले अपनी स्क्रिप्ट को सीधे </body> टैग से पहले रखें।

<html> 
<head> 
    <title>JS Practice</title> 
</head> 
<body> 
    <div id = "main"> 
     <h1>Simple HTML Page</h1> 
     <p>This is a very simple HTML page.</p> 
     <p>It's about as basic as they come. It has: </p> 
     <ul> 
      <li>An H1 Tag</li> 
      <li>Two paragraphs</li> 
      <li>An unordered list</li> 
     </ul> 
    </div> 
    <div id="javascript"> 
    </div> 

    <!-- Now it will run after the above elements have been created --> 
    <script src="script.js"></script> 
</body> 
</html> 
12

इस समस्या को हल करने का एक आसान तरीका है। अपनी जावास्क्रिप्ट को फ़ंक्शन के अंदर रखें और window.onload का उपयोग करें। उदाहरण के लिए तो:

window.onload = function any_function_name() 
{ 

var newHeading = document.createElement("h1"); 
var newParagraph = document.createElement("p"); 

newHeading.innerHTML = "New Heading!"; 
newParagraph.innerHTML = "Some text for a paragraph."; 

document.getElementById("javascript").appendChild(newHeading); 
document.getElementById("javascript").appendChild(newParagraph); 
} 

अब, आप के बाद एचटीएमएल लोड हो जाने की वजह से है कि अपने कोड चलेगा, जो आपके टैग स्थानांतरित करने के लिए नहीं है।

1

मैं पूरी तरह से लोड करने के लिए डोम सामग्री के लिए इंतजार करना एक घटना श्रोता जोड़ने

document.addEventListener("DOMContentLoaded", function() { 
    place_the_code_you_want_to_run_after_page_load 
}) 
0

आपका डोम लोड नहीं है, इसलिए getElementById अशक्त वापस आ जाएगी, document.ready() jQuery

में उपयोग
$(document).ready(function(){ 

    var newHeading = document.createElement("h1"); 
    var newParagraph = document.createElement("p"); 

    newHeading.innerHTML = "New Heading!"; 
    newParagraph.innerHTML = "Some text for a paragraph."; 

    document.getElementById("javascript").appendChild(newHeading); 
    document.getElementById("javascript").appendChild(newParagraph); 

    } 
0

क्योंकि आपके JavaScript फ़ाइल पहले भरी हुई है, और उस समय जब आप window.document.body.appendChild(btn) लिखते हैं, body तत्व html में लोड नहीं है, इसीलिए आपको इन्हें यहां त्रुटि हो रही है, आप डॉम में बॉडी एलिमेंट लोड होने के बाद जेएस फाइल लोड कर सकते हैं।

index.html

<html> 
    <head> 
     <script src="JavaScript.js"></script>  
    </head> 
    <body onload="init()"> 
      <h3> button will come here</h3> 
    </body> 
</html> 

जावास्क्रिप्ट।जेएस

function init(){ 

    var button = window.document.createElement("button"); 

    var textNode = window.document.createTextNode("click me"); 

    button.appendChild(textNode); 

    window.document.body.appendChild(button); 

    } 
संबंधित मुद्दे