javascript - 为什么获取外部 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中用于获取 outerHTML 的函数：

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.... 这是相关元素的外部 HTML。

元素的 outerHTML 的一般形式是：

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

哪里ElementSelector是你想要的 outerHTML 元素的 jQuery 选择器。

---

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

Answer 3

更新演示_

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

• htmlspecialchars 函数

Answer 4

试试这个：

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

Answer 5

您可以使用get拉出本机 DOM 元素，然后使用outerHTMLas ：

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

或者

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