为什么jQuery .html（）没有得到完整的HTML代码？

Question

我有一个按钮。当我点击它时，我想从div中获取HTML。这个div包含一些表行。

微小标记

<div class="new">
    <tr>
        <td><strong>New</strong></td>
        <td>Hi</td>
    </tr>
</div>​

当我想把HTML放在桌子上时出错了。

我从$('.new').html()获得了什么

<strong>New</strong>
hi

看起来jQuery没有使用<tr><td>部分。

有谁知道如何实现这个目标？

http://jsfiddle.net/PQXxV/

Answer 1

你的标记无效，只是因为你编写你的html文本并不意味着浏览器会根据你的需要解析它，它有规则，如果你的标记无效，它会尝试为你修复它。 / p>

如果它是你可以使用脚本标签的模板：

<script type="x-template" class="new">
    <tr>
        <td><strong>New</strong></td>
        <td>Hi</td>
    </tr>
</script>

<table>
    <tr>
        <td><strong>Old</strong></td>
        <td>Hello</td>
    </tr>
</table>

演示：http://jsfiddle.net/PQXxV/10/

Answer 2

<tr>和<td>仅在<table>内有效。在div内，它会被忽略。你应该把它放在一个表中： http://jsfiddle.net/PQXxV/5/

这是一个代码：

$('table').append($('.new').html());

alert($('.new tbody').html());
​

对于像这样的HTML：

<div class="new" style="display:none;">
    <table>
       <tr>
           <td><strong>New</strong></td>
           <td>Hi</td>
       </tr>
    </table>
</div>

Answer 3

<div class="new">
    <table>
        <tr>
            <td><strong>New</strong></td>
            <td>Hi</td>
        </tr>
   </table>
</div>

使用$(".new table").html()访问它，然后删除必要的值。

Answer 4

使用Chrome，如果您使用课程new检查div，您会发现Chrome会删除<tr>和<td>，只留下：

<div class="new" style="display:none;">    
        <strong>New</strong>
        Hi    
</div>

警报返回的是什么。因此，要回答您的问题，.html()将返回完整的HTML。

Answer 5

浏览器不会正确地渲染html，它会忽略一些标记并添加一些额外的标记，这些标记会随着您的示例而出现。 由于缺少表格元素，它忽略了tr和td

Here is JS Fiddle

<div class="new" style="display:none;">
    <table>
    <tr>
        <td><strong>New</strong></td>
        <td>Hi</td>
    </tr>
</table>
</div>

Answer 6

来自jQuery.html()文档，

  

此方法使用浏览器的 innerHTML属性。有些浏览器可能   不返回完全复制原始HTML源的HTML   文献。例如，Internet Explorer有时会离开   如果属性值仅包含字母数字，则引用它们   字符。

您的html结构无效，因为tr无法直接嵌套到div中。您应该将其更改为table，一切都会有效。

Answer 7

<div class="new" style="display:none;">
    <tr>
        <td><strong>New</strong></td>
        <td>Hi</td>
    </tr>
</div>

<table>
    <tbody>
    <tr>
        <td><strong>Old</strong></td>
        <td>Hello</td>
    </tr>
    </tbody>
</table>
Add a tbody tag and then use the below will get the result
$('table > tbody').append($('.new').html());