将 TR 和 TD 标签编写为 DIV / TD 的内部 HTML答案

【问题标题】：Writing TR and TD tags as Inner HTML of a DIV / TD将 TR 和 TD 标签编写为 DIV / TD 的内部 HTML
【发布时间】：2012-10-30 00:24:18
【问题描述】：

我正在使用 JavaScript innerHTML 属性在 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。

【问题讨论】：

构建字符串然后设置innerHTML。设置 innerHTML 时，如果 HTML 格式错误，浏览器将尝试修复内容。

标签： javascript dom html-table

【解决方案1】：

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

listing.innerHTML += tbl;

【讨论】：

【解决方案2】：

问题是每次你向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;

注意： 还要确保将所有属性值括在匹配的引号中（双引号或单引号，但它们必须匹配）。不支持不带引号的属性值，尽管它们有时可能会起作用。

【讨论】：

【解决方案3】：

如果您说您所做的更改不会在您查看页面源代码时出现，那很好。这是因为它没有从您通过 DOM 中的 JS 所做的更改中更新。

看看使用 Firefox/Firebug

实时检查 HTML 并修改样式和布局。

【讨论】：