1

我正在使用 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。

4

3 回答 3

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;

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

于 2012-11-09T16:43:51.470 回答
0

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

看看使用 Firefox/Firebug

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

于 2012-11-09T16:42:36.000 回答
0 
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;
于 2012-11-09T16:44:23.897 回答