Question

var data={
    1:"dasf",
    2:"jlla",
    3:"jalf"
};
(function () {
    var table=document.createElement("table");
    var tr=document.createElement("tr");
    for(var i in data){
        tr.innerText=data[i];
        (function(){
             table.appendChild(tr);
              console.log("in"+tr.innerText)
         })();
        console.log("out"+table);
    }
})();

它每次都会显示出不同的变化，猜测追加儿童时间的发生并不是简单地跟随？

Answer 1

您只能创建一个tr元素。

每次添加它时，都会将其从DOM中的位置移动并将其放在新位置。

如果您想为data中的每个项目创建一个新的表格行，那么您需要在循环中移动createElement来电。

（您还需要更改向其添加内容的方式，不允许tr元素直接包含文本，如果您不在每行中放置多个数据单元，你可能应该首先使用列表而不是表格。

Answer 2

请参阅此代码段以创建表格我已经编辑了你的代码

<div id="wrap"></div>

<script>

var data={
    1:"dasf",
    2:"jlla",
    3:"jalf"
};
(function () {
    var table=document.createElement("table");
    var tr;
    var td;
    for(var i in data){
        tr=document.createElement("tr");
        td=document.createElement("td");
        td.innerText = data[i];

        tr.appendChild(td);
        table.appendChild(tr);
    }
	
document.getElementById("wrap").appendChild(table)
})();

</script>

这将是输出表：

<table>
    <tr>
        <td>dasf</td>
    </tr>
    <tr>
        <td>jlla</td>
    </tr>
    <tr>
        <td>jalf</td>
    </tr>
</table>

追加子节点不能添加1个以上的子节点

2 个答案: