Question

我有：

<p>Paragraph One</p>
<p>Paragraph Two</p>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
<script>
var x = $('p');
x.each(function(index) {
    $('body').append($(this).html().replace('<','&lt;') + '<br>');
});
</script>

我希望看到：

&lt;p>Paragraph One&lt;/p><br>
&lt;p>Paragraph Two&lt;/p><br>

但相反，p标签本身就缺失了。

我正在尝试使我的输出看起来像console.log，它将x标识为两（2）个段落元素。

它在段落中获取了html，但是console.log将其显示为段落。所以我想我需要升级，然后再回来？

Answer 1

这是因为$(this).html()只会为您提供<p>元素的内容，而不是元素本身。

这样做：

var x = $('p');
x.each(function(index) {
    var p_html = this.outerHTML || $('<div>').append($(this).clone()).html();
    $('body').append(p_html.replace('<','&lt;') + '<br>');
});

这会获取每个<p>元素，并获取其.outerHTML属性（类似于innerHTML，但也包含所有者的标记）。

如果不支持.outerHTML属性（我正在看你的Firefox！）那么它使用clone()^[docs]方法来复制{{ 1}}，将其添加到新的<p>并获取<div>的{{1}}。

检查jQuery对象中返回的DOM元素

1 个答案: