为什么此代码不起作用属性？答案

【问题标题】：Why this code doesn't work property?为什么此代码不起作用属性？
【发布时间】：2017-07-21 10:48:43
【问题描述】：

这是我的代码：

            document.getElementById("charthelp").innerHTML+="<table>";
            for(var i=0; i<data.ertekek.length; i++)
            {
                szinek = [Math.floor((Math.random() * 200) + 1), Math.floor((Math.random() * 200) + 1), Math.floor((Math.random() * 200) + 1)];
                charts[i]=new TimeSeries();
                smoothie.addTimeSeries(charts[i], { strokeStyle: 'rgb('+szinek[0]+', '+szinek[1]+', '+szinek[2]+')', fillStyle: 'rgba(0, 255, 0, 0.0)', lineWidth: 3 });
                if(i%2==1){ document.getElementById("charthelp").innerHTML+= '<tr><td><input type="checkbox" id="'+i+'", onclick="handleClick(this)"><span style="background-color:rgb('+szinek[0]+', '+szinek[1]+', '+szinek[2]+')">&nbsp  &nbsp &nbsp</span>'+data.ertekek[i].neve+'</input></td>'; }
                else { document.getElementById("charthelp").innerHTML+= '<td><input type="checkbox" id="'+i+'", onclick="handleClick(this)"><span style="background-color:rgb('+szinek[0]+', '+szinek[1]+', '+szinek[2]+')">&nbsp  &nbsp &nbsp</span>'+data.ertekek[i].neve+'</input></td></tr>'; }
                inic=true;
            }
            document.getElementById("charthelp").innerHTML+='</table>';

这是呈现的 HTML 代码：

<div id="charthelp"><input type="checkbox" id="0" ,="" onclick="handleClick(this)"><table>
    
</table>
<input type="checkbox" id="1" ,="" onclick="handleClick(this)"><span style="background-color:rgb(109, 12, 20)">&nbsp; &nbsp; &nbsp;</span>Elektronikai csarnok
<input type="checkbox" id="2" ,="" onclick="handleClick(this)"><span style="background-color:rgb(92, 148, 103)">&nbsp; &nbsp; &nbsp;</span>Bemutatóterem
<input type="checkbox" id="3" ,="" onclick="handleClick(this)"><span style="background-color:rgb(121, 81, 16)">&nbsp; &nbsp; &nbsp;</span>Fejlesztés

这是一张桌子的照片：

如您所见，JS 代码不起作用属性。它应该按顺序执行，但第一行和最后一行首先运行。之后迭代运行。我想它一定是一张桌子，但它也不是一张桌子……

【问题讨论】：

尝试将您的 HTML 字符串构建为变量，而不是每次都直接设置 innerHTML。只需在进程结束时运行一次 innerHTML 命令，应用您创建的字符串。

标签： javascript html render

【解决方案1】：

我认为问题在于，在您尝试将 <table> 附加到文档 HTML 后，浏览器会自动添加 </table>。

尝试使用

var table = document.createElement('table');
var tr = document.createElement('tr');
table.appendChild(tr);
...
document.getElementById("charthelp").appendChild(table);

【讨论】：