我正在使用 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。
最佳答案
问题在于,每次向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;
注意:还要确保将所有属性值括在匹配的引号中(双引号或单引号,但它们必须匹配)。不支持不带引号的属性值,尽管它们有时可能有效。
关于javascript - 将 TR 和 TD 标签写入 DIV/TD 的内部 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13312206/