JQuery html（）函數與表格無法正常工作

Question

<script type="text/javascript"> 
    $(document).ready(function(){ 
     console.log($('#list_table_template').html()); 
    }); 
</script> 

<div id="list_table_template" style="display: none;"> 
    <table id="list_table" cellpadding="0" cellspacing="0"> 
     <p>123</p> 
     <tr id="lt_header"> 
      <!--#lt_header#--> 
     </tr> 
     <!--#lt_listing#--> 
     <tr id="lt_footer"> 
      <td colspan="5">Footer Placeholder</td> 
     </tr> 
    </table> 
</div> 

此代碼未返回預期結果。

雖然我所期待的日誌顯示：

<table id="list_table" cellpadding="0" cellspacing="0"> 
     <p>123</p> 
     <tr id="lt_header"> 
      <!--#lt_header#--> 
     </tr> 
     <!--#lt_listing#--> 
     <tr id="lt_footer"> 
      <td colspan="5">Footer Placeholder</td> 
     </tr> 
    </table> 

，而是它給了我：

<p>123</p><table id="list_table" cellpadding="0" cellspacing="0"> 

    <tbody><tr id="lt_header"> 
     <!--#lt_header#--> 
    </tr> 
    <!--#lt_listing#--> 
    <tr id="lt_footer"> 
     <td colspan="5">Footer Placeholder</td> 
    </tr> 
</tbody></table> 

注意p標籤是無序跳在面前的桌子上。

Answer 1

除非它位於<th>或<td>標記內，否則不能在表格中嵌套段落。這是無效的HTML，所以你的瀏覽器將它重新定位在表外，jQuery只能讀取瀏覽器解析的內容。

最好的解決方案可能是用caption替代p，這是一個有效的HTML。但是，如果要將段落顯示在表格內，則需要先將其包裝在<tr><td> ... </td></tr>中。

Answer 2

您的瀏覽器無法解析<p>-標記<table>。所以相反，它會被解析得超出它。