Question

我正在使用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为“列表”的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;

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

Answer 2

如果您说在查看页面来源时未显示您所做的更改，那就没问题。这是因为它没有从DOM中通过JS进行的更改中获得更新。

看一下使用Firefox / Firebug

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

Answer 3

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;

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

3 个答案: