Javascript 为什么是表格'；s td node.appendChild不'；不行？_Javascript_Html

Javascript 为什么是表格'；s td node.appendChild不'；不行？

javascript html

Javascript 为什么是表格'；s td node.appendChild不'；不行？,javascript,html,Javascript,Html,我有这个JavaScript函数来创建一个带有图像单元格的表： function Draw(array) { // get the reference for the body var body = document.getElementsByTagName("body")[0]; document.clear(); // creates a <table> element and a <tbody>

我有这个JavaScript函数来创建一个带有图像单元格的表：

    function Draw(array) {
        // get the reference for the body
        var body = document.getElementsByTagName("body")[0];
        document.clear();

        // creates a <table> element and a <tbody> element
        var tbl = document.createElement("table");
        tbl.setAttribute("borderstyle", "1");
        var tblBody = document.createElement("tbody");

        // creating all cells
        for (var j = 0; j < 4; j++) {
            // creates a table row
            var row = document.createElement("tr");

            for (var i = 0; i < 4; i++) {
                // Create a <td> element and a text node, make the text
                // node the contents of the <td>, and put the <td> at
                // the end of the table row
                var cell = document.createElement("td");
                var cellText = document.createElement(array[4 * j + i]);
                cell.appendChild(cellText);
                row.appendChild(cell);
            }

            // add the row to the end of the table body
            tblBody.appendChild(row);
        }

        // put the <tbody> in the <table>
        tbl.appendChild(tblBody);
        // appends <table> into <body>
        body.appendChild(tbl);
        // sets the border attribute of tbl to 2;
        tbl.setAttribute("border", "2");
    }

cell.appendChild（cellText）不工作！
我不知道为什么，也不知道如何解决它
更新
阵列的主要功能如下：
    var a = Array(16);
    for (var i = 0; i < 16; i++) {
        a[i] = '<img src="' + i + '.jpg" />';
    }

var a=Array（16）；
对于（变量i=0；i<16；i++）{
a[i]=''；
}
更新答案
请回复您的评论：
它只是放了一段文字。这意味着我看到的是的文本，而不是图像
如果您告诉我们，array[4*j+i]
包含标记（例如，在问题中包括一个标记示例），那么它会很有用
如果数组包含标记，则不希望创建任何类型的新节点。而是将以下内容分配给表格单元格的innerHTML
：
cell.innerHTML = array[4 * j + i];
row.appendChild(cell);

当您指定给innerHTML
时，浏览器将解析标记并将相关内容添加到元素中

原始答案在给出以下注释之前和数组
内容之前：
要创建文本节点，请使用，而不是createElement
。因此：
// Change here ---------v
var cellText = document.createTextNode(array[4 * j + i]);
cell.appendChild(cellText);
row.appendChild(cell);

假设数组[4*j+i]
是“你好”
。你的document.createElement（数组[4*j+i]）
调用要求DOM创建一个标记名为的元素，就像document.createElement（'div'）
要求它创建一个标记名为div
的元素一样，为了完整起见，这里有一些其他替代方法，如果您希望使用appendChild（）而不是innerHTML属性
你也可以这么做
var a = Array(16);
for (var i = 0; i < 16; i++) {
    a[i] = document.createElement('img');
    a[i].setAttribute('src', i + '.jpg');
}

var a=Array（16）；
对于（变量i=0；i<16；i++）{
a[i]=document.createElement（'img'）；
a[i].setAttribute（'src'，i+'.jpg'）；
}

这也会起作用的。此外，您还可以创建一个图像对象：
var a = Array(16);
for (var i = 0; i < 16; i++) {
    a[i] = new Image();
    a[i].src = i + '.jpg';
}

var a=Array（16）；
对于（变量i=0；i<16；i++）{
a[i]=新图像（）；
a[i].src=i+'.jpg'；
}

这孩子应该还在工作
另一种可用但完全不同的方法是使用javascript框架，如jQuery及其功能。但是，这需要重写您的代码。
它只是放了一个文本。这意味着我在单元格中看到的文本，而不是图像@艾哈迈达利沙菲：你没有告诉我们数组[4*j+i]
的内容是什么。你对这个问题投入越多，你得到的答案就越有用。我已经根据您的评论更新了答案。我尝试了innerHTML
这种方式：cell.innerHTML（数组[4*j+I]）但它也不起作用@Ahmadalishafie嗯，你不应该这样做，而是像建议的cell.innerHTML=array[4*j+i]一样。@Ahmadalishafie:innerHTML
不是函数，而是属性。如果您按照答案中所示使用它，这将起作用。数组[4*j+i]中到底是什么？@eis：包含
var a = Array(16);
for (var i = 0; i < 16; i++) {
    a[i] = new Image();
    a[i].src = i + '.jpg';
}