[removed] AppendChild

后端未结

关注

 6  978

花落未央

I was learning about appendChild and have so far come up with this code:

相关标签:

6条回答

萌比男神i

2020-12-10 07:14
The script is being run before the page completes loading. Which is why document.getElementById("theBlah") returns null.

Either use something like jQuery or simply something like
```
<script>
window.onload = function () {
    var blah="Blah!";
    var t  = document.createElement("table"),
    tb = document.createElement("tbody"),
    ...
    //the rest of your code here
};
</script>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

孤街浪徒

2020-12-10 07:19

Try wrapping your JavaScript in an onload function. So first add:

<body onload="load()">

Then put your javascript in the load function, so:

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

0 讨论(0)

南方客

2020-12-10 07:23
I believe you can just link your JavaScript to your html using the defer attribute.
```
<script src="script.js" defer></script>
```
This way your JavaScript will not run until after the page has loaded.
0 讨论(0)
发布评论:

提交评论
- 加载中...

天涯浪人

2020-12-10 07:23

Do yourself and us a favor and use JQuery. Everything becomes much simpler.

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

0 讨论(0)

悲&欢浪女

2020-12-10 07:31

The problem is that document.getElementById("theBlah") returns null. The reason why is that your code is running before the theBlah element has been created. You should place your code in an onload event handler.

0 讨论(0)
发布评论:

提交评论
- 加载中...

执笔经年

2020-12-10 07:34

proper way (rows & cols & the random innerText is set dynamically ...by you) this way is probably not the shortest but by way the fastest to build a table. It’s also a full table with thead and filled with random text:

use native JavaScript (not slowing down JQuery)
(function(){})() executes the code before body is loading
doesn’t have problems with other variables outside the function
and pass the document so you have shorter variables
there is a way to shorten the function by using clone node... but it’s slower and maybe not supported by all browsers
use createDocumentFragment() to create the tr’s. If you have a lot of rows this helps to build the DOM faster.

    (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 讨论(0)

热议问题