Javascript: appendChild

yo estaba aprendiendo sobre appendChild y hasta el momento han llegado con este código: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>

Pero eso me da un error que dice Uncaught TypeError: Cannot call method 'appendChild' of null. ¿Qué estoy haciendo mal?

Fuente

2011-07-28 Ryan

También puede colocar su secuencia de comandos a continuación * theBlah * y funcionará sin un * onload * oyente. – RobG

Pruebe envolviendo su JavaScript en una función de carga. Así primer complemento:

<body onload="load()">

A continuación, poner el Javascript en función de la carga, por lo que:

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

Fuente

2011-07-28 23:34:50

El problema es que document.getElementById("theBlah") vuelve nula. La razón por la cual es que su código se está ejecutando antes de que se haya creado el elemento theBlah Debe colocar su código en un controlador de eventos onload.

Fuente

2011-07-28 23:35:49 Jacob

-2

Hágase usted y nosotros un favor y use JQuery. Todo se vuelve mucho más 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...

Fuente

2011-07-28 23:37:24 Yossi

Solo estoy usando JS para hacer algunos cambios en un complemento de Firefox ... no estoy seguro de cuáles son sus políticas en JQuery ... – Ryan

JQuery se traduce finalmente en Javascript, ya sabes ... Me cuesta creer que haya es un diferente ... – Yossi

No, no sabía eso. No tengo experiencia ni conocimiento de jquery ... – Ryan

El script se está ejecutando antes de que la página complete la carga. Por eso document.getElementById ("theBlah") devuelve null.

O bien utilizar algo así como jQuery o simplemente algo así como

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

Fuente

2011-07-28 23:41:51 arunkumar

forma correcta (filas & cols & la innerText al azar se ajusta dinámicamente por u ...) esta manera no es prolly la más corta, pero a través el más rápido para construir una mesa. también es una mesa llena con la culata en T y lleno de texto al azar

1.Utilice Javascript nativo (no ralentizar jQuery)

2. (function() {})() ejecuta el código antes de cuerpo es de carga

3.And no tienen problemas con otras variables fuera de la función

4.and aprobar el documento de modo u tienen las variables más cortas

5.there es una manera de acortar la función utilizando el clon nodo ... bu t es más lento y quizás no sea compatible con todos los navegadores

6.createDocumentFragment() para crear los tr's. si tienes muchas filas, esto ayuda mucho a construir el DOM más rápido.

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

Fuente

2013-06-04 01:08:41 cocco

Javascript: appendChild

Respuesta

Cuestiones relacionadas