爲什麼.html（）將當前值替換爲一切？

-1

$('table').html('<tr><td>test</td></tr>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<img src="default.jpg" /> 
 
</table>

正如你看到的，圖像仍然存在。爲什麼？我用.html，所以這種預期在執行此之後的結果：$('table').html('<tr><td>test</td></tr>');

<table> 
    <tr> 
     <td>test</td> 
    </tr> 
</table>

我怎麼能這樣做？

來源

2017-02-26 stack

檢查呈現的標記，你會看到的原因。「_我該怎麼做？_」 - >使用有效的標記。 – Andreas

因爲初始DOM構建完成後圖像不在表格中。 –

，因爲這是無效的標記（img不能是表的孩子） - 瀏覽器「幫助」將圖像移動到「

」標記之前 - 刪除javascript並檢查DOM，看看發生了什麼 –

回答

原因在於img不在表格內，因爲它不允許爲html。 <table><img ...></table>是無效的標記;表格只能直接包含certain table-related elements，而不是img元素。所以瀏覽器通過將img移出表格來修復它。（例如：瀏覽器通過移動img只是在桌子前修復它：<img ...><table></table>）

如果它是在表擺在首位，是的，呼籲html替換表的內容將工作：

$('table').html('<tr><td>test</td></tr>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <img src="default.jpg" /> 
 
    </td> 
 
    </tr> 
 
</table>

在評論你問：

...我該如何選擇圖片？ <img src="#" /> <table></table>？其實我想從table標籤開始選擇。這樣$('table').sibiling ...

我不認爲你可以，可靠，又因爲原來的標記是無效的，因此瀏覽器可以自由地做他們想做的處理它的東西。這表示，Chrome，Firefox和IE11都似乎把IMG 面前的桌子，所以$("selector-for-the-table").prev()應該是img：

var table = $('table'); 
 
table.html('<tr><td>test</td></tr>'); 
 
table.prev().remove(); // Remove the img

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<img src="default.jpg" /> 
 
</table>

來源

2017-02-26 10:51:42

偉大的解決方法。謝謝。只是爲了我的信息，你能告訴我如何選擇這個圖片嗎？ '

'？其實我想用'table'標籤開始選擇。就像這個$（'table'）。sibiling ...' – stack

@stack：我在答案的末尾添加了一些內容。 –

IMG不是文字標籤。如果你想隱藏它，你必須刪除它。

來源

2017-02-26 10:48:34

爲什麼.html（）將當前值替換爲一切？

回答

相關問題