Javascript: appendChild

J'apprenais appendChild et ont à ce jour arriver à ce code:Javascript: 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>

Mais cela me donne une erreur disant Uncaught TypeError: Cannot call method 'appendChild' of null. Qu'est-ce que je fais mal?

Source

2011-07-28 Ryan

Vous pouvez également placer votre script ci-dessous * theBlah * et il fonctionnera sans un écouteur * onload *. – RobG

Essayez d'envelopper votre JavaScript dans une fonction de chargement. Alors d'abord ajouter:

<body onload="load()">

Ensuite, mettez votre javascript dans la fonction de charge, donc:

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); 
}

Source

2011-07-28 23:34:50

Le problème est que document.getElementById("theBlah") retourne NULL. La raison est que votre code est en cours d'exécution avant que l'élément theBlah ait été créé. Vous devez placer votre code dans un gestionnaire d'événements onload.

Source

2011-07-28 23:35:49 Jacob

-2

Faites-vous et nous une faveur et utilisez JQuery. Tout devient beaucoup plus simple.

$('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...

Source

2011-07-28 23:37:24 Yossi

Je n'utilise que JS pour apporter quelques modifications à un plugin Firefox ... je ne suis pas sûr de ce que sont leurs politiques sur JQuery ... – Ryan

JQuery est enfin traduit en Javascript vous savez ... Je suis difficile à croire là est différent ... – Yossi

Non, je ne le savais pas. Je n'ai pas l'expérience ni la connaissance de jquery ... – Ryan

Le script est en cours d'exécution avant le chargement de la page. C'est pourquoi document.getElementById ("theBlah") renvoie null.

Soit utiliser quelque chose comme jQuery ou simplement quelque chose comme

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

Source

2011-07-28 23:41:51 arunkumar

manière appropriée (lignes & & la innerText Col. aléatoire est réglé par u ... dinamically) cette façon est prolly pas le plus court, mais par le plus rapide pour construire une table. c'est aussi une table complète avec thead et rempli de texte aléatoire

javascript 1.Utilisez natif (pas ralentir jquery)

2. (function() {})() exécute le code avant le corps est en cours de chargement

3.And n'ont des problèmes avec d'autres variables en dehors de la fonction

passer le document 4. Et si u ont des variables plus courtes

5.There est un moyen de réduire la fonction en utilisant clone nœud ... bu t il est plus lent et peut-être pas pris en charge par tous les navigateurs

6.createDocumentFragment() pour créer les tr. Si vous avez beaucoup de lignes cela aidera beaucoup à construire le DOM plus rapidement.

(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)

Source

2013-06-04 01:08:41 cocco

Javascript: appendChild

Répondre

Questions connexes