Question

我正在尝试通过Javascript生成一个包含内容的表格，但即使我尝试静态地执行此操作，我也遇到了问题，就像这个非常简单的示例一样：

            document.getElementById("gmaData").innerHTML+='<table border="1">'
            document.getElementById("gmaData").innerHTML+='<tr>'
            document.getElementById("gmaData").innerHTML+='<td>something</td>'
            document.getElementById("gmaData").innerHTML+='</tr>'
            document.getElementById("gmaData").innerHTML+='</table>'

但是当我运行脚本时，表格的内容会在表格之外加载，而<tr>和<td>标签甚至都没有显示：

<div id="gmaData">
    <table border="1"></table>
    something
</div>

我不知道是什么导致了这个错误。

Answer 1

var genHTML = '<table border="1">';
genHTML+='<tr>';
genHTML+='<td>something</td>';
genHTML+='</tr>';
genHTML+='</table>';
document.getElementById("gmaData").innerHTML(genHTML);

你不能将字符串连接与.innerHTML

一起使用

Answer 2

您正在思考标记，但浏览器使用对象树（DOM）。

当您从innerHTML读取时，浏览器会获取元素内的DOM对象并将它们序列化为HTML。当您将分配给innerHTML时，浏览器会解析您提供的HTML并创建一个匹配的DOM结构，以纠正它找到的任何格式错误的内容。

简短的回答是：不要在+=上使用innerHTML，而不是一个非常非常好的理由。它不必要地昂贵（通常不是问题），更重要的是，你执行它的元素中的任何元素都将失去它们的状态（包括事件处理程序）。当然，浏览器不会让你追加元素的开头，然后是的结尾。

在您的情况下，您需要立即为整个表分配HTML：

document.getElementById("gmaData").innerHTML = // Or += if you're really appending
    '<table border="1">' +
    '<tr>' +
    '<td>something</td>' +
    '</tr>' +
    '</table>';

这有时意味着在字符串变量中构建HTML，然后在完成时分配。

Javascript生成的内容在其父母身份之外加载

2 个答案: