JS Dom节点操作demo!

Posted 2020-09-10

通过黑马课程的学习，在这里分享一个js Dom中节点操作的小练习

需求:使用js创建一个4*3的表格table.

onload = function(){
        function c(tagName){
            return document.createElement(tagName);
        }
        var table = c(‘table‘);
        var tbody = c(‘tbody‘);
        table.appendChild(tbody);
        for(var i = 0;i<4;i++){
            var tr = c(‘tr‘);
            for(var j = 0;j<3;j++){
                var td = c(‘td‘);
                //在td中放置文本
                var txt = document.createTextNode(‘‘);
                td.appendChild(txt);
                tr.appendChild(td);
                td.width = 200;
                td.height = 50;
            }
            tbody.appendChild(tr);
        }
        table.setAttribute(‘border‘,‘1‘);
        document.body.appendChild(table);
    };