जावास्क्रिप्ट: appendChild

मैं appendChild के बारे में सीखने गया था और अब तक इस कोड के साथ आए हैं:जावास्क्रिप्ट: appendChild

var blah = "Blah!"; 
 
var t = document.createElement("table"), 
 
    tb = document.createElement("tbody"), 
 
    tr = document.createElement("tr"), 
 
    td = document.createElement("td"); 
 

 
t.style.width = "100%"; 
 
t.style.borderCollapse = 'collapse'; 
 

 
td.appendChild(document.createTextNode(blah)); 
 

 
// note the reverse order of adding child   
 
tr.appendChild(td); 
 
tb.appendChild(tr); 
 
t.appendChild(tb); 
 

 
document.getElementById("theBlah").appendChild(t);

<div id="theBlah">d</div>

लेकिन है कि मुझे Uncaught TypeError: Cannot call method 'appendChild' of null कह एक त्रुटि देता है। मैं क्या गलत कर रहा हूं?

स्रोत

2011-07-28 Ryan

आप अपनी स्क्रिप्ट * theBlah * के नीचे भी रख सकते हैं और यह * ऑनलोड * श्रोता के बिना काम करेगा। – RobG

अपनी जावास्क्रिप्ट को ऑनलोड फ़ंक्शन में लपेटने का प्रयास करें। तो सबसे पहले एड:

<body onload="load()">

फिर लोड समारोह में अपने जावास्क्रिप्ट शब्दों में कहें, तो:

function load() { 
    var blah="Blah!"; 
    var t = document.createElement("table"), 
    tb = document.createElement("tbody"), 
    tr = document.createElement("tr"), 
    td = document.createElement("td"); 

    t.style.width = "100%"; 
    t.style.borderCollapse = 'collapse'; 

    td.appendChild(document.createTextNode(blah)); 

    // note the reverse order of adding child   
    tr.appendChild(td); 
    tb.appendChild(tr); 
    t.appendChild(tb); 

    document.getElementById("theBlah").appendChild(t); 
}

स्रोत

2011-07-28 23:34:50

समस्या यह है कि document.getElementById("theBlah") रिटर्न रिक्त है। theBlah तत्व से पहले आपका कोड चल रहा है इसका कारण यह है कि। आपको अपना कोड onload ईवेंट हैंडलर में रखना चाहिए।

स्रोत

2011-07-28 23:35:49 Jacob

-2

अपने आप को और हमें एक पक्ष दें और JQuery का उपयोग करें। सब कुछ बहुत आसान हो जाता है।

$('div.SomeDiv').append($('<table></table>').css('width','100%').append($('<tbody></tbody>').append($('<tr></tr>').append($('<td></td>').html("Blah Text"))))); // Everything else you want to add here...

स्रोत

2011-07-28 23:37:24 Yossi

मैं केवल फ़ायरफ़ॉक्स प्लगइन में कुछ बदलाव करने के लिए जेएस का उपयोग कर रहा हूं ... मुझे यकीन नहीं है कि उनकी नीतियां JQuery पर क्या हैं ... – Ryan

JQuery का अंततः जावास्क्रिप्ट में अनुवाद किया गया है ... मुझे विश्वास करना मुश्किल है एक अलग है ... – Yossi

नहीं, उसे नहीं पता था। मुझे अनुभव नहीं है और न ही jquery का ज्ञान ... – Ryan

पृष्ठ लोड होने से पहले स्क्रिप्ट चल रही है। यही कारण है कि document.getElementById ("theBlah") शून्य लौटाता है।

या तो या jQuery की तरह कुछ बस

<script> 
window.onload = function() { 
    var blah="Blah!"; 
    var t = document.createElement("table"), 
    tb = document.createElement("tbody"), 
    ... 
    //the rest of your code here 
}; 
</script>

स्रोत

2011-07-28 23:41:51 arunkumar

उचित तरीके (पंक्तियों & कॉलम & यादृच्छिक innerText dinamically ... यू द्वारा निर्धारित है) की तरह कुछ इस तरह prolly कम से कम लेकिन जिस तरह से नहीं है का उपयोग करें एक टेबल बनाने के लिए सबसे तेज़। यह भी (नीचे jQuery धीमा नहीं) thead और यादृच्छिक पाठ

देशी जावास्क्रिप्ट 1.use से भरा के साथ एक पूर्ण तालिका है

2. (समारोह() {})() कोड कार्यान्वित होने से पहले शरीर लोड हो रहा है

3.and समारोह

4.And बाहर अन्य चर के साथ समस्या नहीं है दस्तावेज़ पास इतना यू कम चर राशि

5.There क्लोन का उपयोग करके समारोह को छोटा करने के लिए एक रास्ता है नोड ... बीओ यह धीमा है और शायद सभी ब्राउज़रों द्वारा समर्थित नहीं है

6.createDocumentFragment() tr बनाने के लिए। यदि आपके पास पंक्तियों के बहुत सारे हैं तो यह तेजी से डोम बनाने में मदद करता है।

(function (d) { 
    var rows = 10, 
     cols = 3, 
     t = d.createElement('table'), 
     the = d.createElement('thead'), 
     tb = d.createElement('tbody'), 
     tr = d.createElement('tr'); 
    t.style.width = "100%"; 
    t.style.borderCollapse = 'collapse'; 
    for (var a = 0; a < cols; a++) { 
     var th = d.createElement('th'); 
     th.innerText = Math.round(Math.random() * 100); 
     tr.appendChild(th); 
    }; 
    the.appendChild(tr); 
    var f = d.createDocumentFragment(); 
    for (var a = 0; a < rows; a++) { 
     var tr = d.createElement('tr'); 
     for (var b = 0; b < cols; b++) { 
      var td = d.createElement('td'); 
      td.innerText = Math.round(Math.random() * 100); 
      tr.appendChild(td); 
     } 
     f.appendChild(tr); 
    } 
    tb.appendChild(f); 
    t.appendChild(the); 
    t.appendChild(tb); 
    window.onload = function() { 
     d.body.appendChild(t) 
    }; 
})(document)

स्रोत

2013-06-04 01:08:41 cocco

जावास्क्रिप्ट: appendChild

उत्तर

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