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

Question

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

            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>'

但是当我运行脚本时，table 的内容加载到 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 上使用 +=。它不必要地昂贵（这通常不是问题），更重要的是，您对其执行此操作的元素内的任何元素都将丢失其状态（包括事件处理程序）。当然，浏览器不会让您追加元素的开头和结尾 later.

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

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

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

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

Content generated by Javascript loads outside of its parenthood

javascript

innerhtml