为什么获取外部HTML不起作用？

Question

基于这个问题,我尝试以两种不同的方式获取外部HTML .不幸的是,他们都没有给出预期的结果:

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>

这里有实例

我究竟做错了什么 ？

Answer 1

这是 lib pure.js 中用来获取外层 HTML的函数：

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

并以 DOM 方式使用它：

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

Answer 2

首先,你的第一个例子工作正常.看一下Firebug中的输出.请注意,由于您的输出是HTML,因此它将呈现为HTML.请注意HELLO............... 之前和之后都有换行符,因为HELLOs在DIV内!

看一看:

第二个w/jQuery,您也可以在我对您链接的问题的回答中使用该方法:

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

jsFiddle例子

这会将有问题的元素的克隆附加到DIV jQuery对象,并获取DIV jQuery对象的内部HTML ....这是所讨论元素的outerHTML.

元素的outerHTML的一般形式是:

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

ElementSelector你想要的outerHTML元素的jQuery选择器在哪里？

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