Javascript: AppendChild - PullRequest
Новая
       15

Javascript: AppendChild

7 голосов
/ 29 июля 2011

Я узнал о 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. Что я делаю не так?

Ответы [ 5 ]

22 голосов
/ 29 июля 2011

Попробуйте обернуть ваш JavaScript в функцию загрузки.Итак, сначала добавьте: 

<body onload="load()">

Затем поместите свой JavaScript в функцию загрузки, так: 

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);
}
11 голосов
/ 29 июля 2011

Сценарий запускается до завершения загрузки страницы.Вот почему 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>
7 голосов
/ 29 июля 2011

Проблема в том, что document.getElementById("theBlah") возвращает ноль. Причина в том, что ваш код работает до того, как элемент theBlah был создан. Вы должны поместить свой код в обработчик событий onload.

2 голосов
/ 04 июня 2013

надлежащим образом (строки и столбцы & случайный innerText задан динамически ... u), этот путь, безусловно, не самый короткий, но самый быстрый способ построения таблицы.это также полная таблица с thead, заполненная случайным текстом

1.use нативный javascript (не замедляющий jquery)

2. (function () {}) () выполняет код передтело загружается

3.и не имеют проблем с другими переменными вне функции

4.и передайте документ, чтобы у вас были более короткие переменные

5.способ сократить функцию с помощью узла-клона ... но он медленнее и, возможно, поддерживается не всеми браузерами

6.createDocumentFragment () для создания tr.если у вас есть много строк, это помогает быстрее построить DOM.

(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)
0 голосов
/ 29 июля 2011

Сделайте себе и нам одолжение и используйте 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...
...