为啥获取外部 HTML 不起作用？

Posted 2023-05-07

【中文标题】为啥获取外部 HTML 不起作用？

【英文标题】：Why getting an outer HTML does not work?为什么获取外部 HTML 不起作用？

【发布时间】：2011-04-14 08:18:20

【问题描述】：

我尝试以两种不同的方式获取外部 html，基于 this question。不幸的是，他们都没有给出预期的结果：

HTML：

<div id='my_div'>Hello</div>

JS：

$(function() 
    document.write('[' + $('#my_div').clone().wrapAll("<div />").parent().get(0).innerHTML + ']<br />');
    document.write('[' + (new XMLSerializer().serializeToString(document.getElementById('my_div'))) + ']');
);

输出是：

[
Hello
]
[
Hello
]

我希望得到以下结果：<div id='my_div'>Hello</div>

Live example here

我做错了什么？

【问题讨论】：

How do I do OuterHTML in firefox?的可能重复

您的第一个代码 sn-p 有效，您的第二个代码几乎有效。查看页面的 HTML。输出 看起来 像纯文本，因为它呈现为 HTML .....注意换行符.... DIVS！

如何提问的好例子。这就是我正在做的事情。这是代码。这是正在发生的事情。这正是我所期望的。

【参考方案1】：

首先，您的第一个示例运行良好。在 Firebug 中查看您的输出。请注意，由于您的输出 是 HTML，它会呈现为 HTML。请注意，HELLO...... 前后都有换行符，因为 HELLOs 在 DIV 中！

看看：

---

第二个w/jQuery，你也可以使用the method in my answer to the question you linked to：

var outerHTML =  $('<div>').append( $("#my_div").clone() ).html();

jsFiddle example

这会将相关元素的克隆附加到 DIV jQuery 对象并获取 DIV jQuery 对象的内部 HTML....这是相关元素的外部 HTML。

一个元素的outerHTML的一般形式是：

$('<div>').append( $(ElementSelector).clone() ).html();

其中ElementSelector 是您想要其外部HTML 的元素的jQuery 选择器。

---

注意：以上没有向 DOM 添加新元素。 $('<div>')...... 永远不会添加到 DOM 中。它仍然只是独立于 DOM 的 jQuery 对象。

【参考方案2】：

这是在库pure.js 中用于获取外层HTML 的函数：

function outerHTML(node)
    return node.outerHTML || new XMLSerializer().serializeToString(node);

并以 DOM 方式使用它：

var html = outerHTML(document.getElementById('my_div'));

【讨论】：

+1 - 不错的答案。你应该把它发到original question about this。

【参考方案3】：

更新DEMO

   $(function() 
        var html = $('<div>').append($('#my_div').clone()).html();
        $('body').html( htmlspecialchars( '[' + html + ']' ) );
   );

htmlspecialchars function

【讨论】：

我想要的只是获取给定元素的外部 HTML，在我的例子中：$('#my_div')。我不想向 DOM 添加元素。

例如，你想得到我的 div 的包装器！？假设这样的代码：<div id='wrapper'><div id='my_div'>Hello</div></div> ?

问题是我没有任何包装器，最好我不想创建一个...同样，我只有一个元素，我想获得它的外部 HTML .就这么简单:)

@Misha - $('<div>')... 不会为#my_div 创建包装器或将任何元素添加到 DOM。它制作了#my_div 的副本并将其附加到<div>，它不是 DOM 的一部分。另一个 DIV 只是一个 jQuery 对象，用于提取 #my_div 的外部 HTML .........请参阅我的答案，了解为什么您认为您的第一个代码 sn-p 不起作用；尽管如此，它确实做到了。

【参考方案4】：

试试这个：

var result = $('<div></div>').append($('#my_div').clone()).html();
alert(result);

【讨论】：

你需要转义输出才能正确看到它 => jsbin.com/enexi4/3/edit

不需要$('<div></div>')。 $('<div>') 也可以...最快的是$('<div/>')....如果速度不是问题，我更喜欢$('<div>') 以提高可读性。

彼得，$('<div></div>')、$('<div>') 和 $('<div/>') 有什么区别？

【参考方案5】：

您可以使用get 拉出原生DOM 元素，然后使用outerHTML 作为：

var html = $('#my_div').get(0).outerHTML;

或

var html = $('#my_div')[0].outerHTML;