寫作TR和TD標籤爲/一個DIV的內部HTML TD

我使用的是JavaScript的innerHTML屬性寫作TR和TD標籤爲/一個DIV的內部HTML TD

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寫一個DIV裏面的表，內容是寫沒有表格標籤，即<td> </td> </tr> <tr>。

即出現所需內容但未格式化爲HTML表格。當我在瀏覽器中查看源代碼時，TR和TD以及相同的封閉標籤都缺失。任何想法爲什麼？我正在使用Chrome。

來源

2012-11-09 varun Kishnani

構建字符串，然後設置innerHTML。當您設置innerHTML時，如果HTML格式錯誤，瀏覽器將嘗試修復內容。 – Shmiddty

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-09 16:44:23 Shmiddty

謝謝你Shmiddty ... –

如果您在說當您查看頁面的源代碼時沒有顯示您所做的更改，那很好。這是因爲它沒有從您在DOM中通過JS進行的更改中更新。

看一看使用Firefox/Firebug的

檢查HTML和實時修改樣式和佈局。

來源

2012-11-09 16:42:36

問題是，每次向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;

注：也確保你封閉在匹配報價的所有屬性值（無論是douple或單身，但他們必須匹配）。不帶引號的屬性值不受支持，儘管它們有時可能有效。

來源

2012-11-09 16:43:51 redShadow

非常感謝紅影......現在就像一個魅力.. –

寫作TR和TD標籤爲/一個DIV的內部HTML TD

回答

相關問題