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

我尝试以两种不同的方式获取外部 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

我究竟做错了什么 ？

解决方法

首先,你的第一个例子工作正常.看一下 Firebug中的输出.注意,由于输出是HTML,因此它呈现为HTML.请注意,在HELLO之前和之后都有新行……………因为HELLO在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 ….这是所讨论元素的outerHTML.

元素的outerHTML的一般形式是：

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

其中ElementSelector是您想要的outerHTML元素的jQuery选择器.

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