jquery - 为什么 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 文本并不意味着浏览器会按照你的意愿解析它，它有规则，如果你的标记是无效的，它会尝试为你修复它。

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

<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>Being inside中有效，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，如果你用 class 检查 div new，你会发现 Chrome 会去掉<tr>and<td>留下这个：

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

这是警报返回的内容。因此，要回答您的问题，请.html()返回完整的 html。

Answer 5

浏览器不会完全呈现我们编写的 html，它会忽略一些标签并添加一些额外的标签，这与您的示例一样。由于缺少表格元素，它会忽略 tr 和 td

这是 JS 小提琴

<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());