javascript - 将 TR 和 TD 标签写入 DIV/TD 的内部 HTML

Question

我正在使用 JavaScript insideHTML 属性在 DIV 中编写表格

listing.innerHTML += '<table> <tr><td><img src='+ pic + friends[a].split("|")[1] + '/picture"' + ' class="pic" /></td>'; 

listing.innerhtml += '<td class="name">' + friends[a].split("|")[0] + "</td>";

listing.innerHTML += "<td><button id='add' onclick=write() /> </td> </tr> </table>";

对于 ID 为 'listing' 的 div，写入的内容不带表格标签，即 <td> </td> </tr> <tr> .

即所需内容出现，但未格式化为 HTML 表。当我在浏览器中查看源代码时，相同的 TR 和 TD 以及闭合标签丢失了。知道为什么吗？我正在使用 Chrome。

Answer 1

问题在于，每次向innerHTML添加内容时，DOM都会更新，浏览器会关闭未关闭的<table>为你。

我建议您生成整个 html，然后立即将其添加到innerHTML:

var myhtml = "";
myhtml += '<table> <tr><td><img src="'+ pic + friends[a].split("|")[1] + '/picture"' + ' class="pic" /></td>'; 
myhtml += '<td class="name">' + friends[a].split("|")[0] + "</td>";
myhtml += "<td><button id='add' onclick='write()' /> </td> </tr> </table>";
listing.innerHTML += myhtml;

注意:还要确保将所有属性值括在匹配的引号中(双引号或单引号，但它们必须匹配)。不支持不带引号的属性值，尽管它们有时可能有效。