为什么要获得外部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

第一的， 您的第一个示例正常. 。看看您的输出 火焰. 。请注意，由于您的输出 是html 它是 呈现为HTML. 。请注意，在此之前和之后都有新线 HELLO......因为 HELLOs在内部divs！

看一看：

---

第二w/ jquery，您也可以使用 我回答您链接到的问题的方法:

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

JSFIDDLE示例

这将所讨论的元素的克隆附加到Div jQuery对象上，并获取Div jQuery对象的内部HTML ....这是所讨论的元素的外部HTML。

元素的外部HTML的一般形式是：

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

在哪里 ElementSelector 是您想要的OuterHtml元素的jQuery选择器。

---

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

Answer 2

这是LIB中使用的功能 pure.js 要获得外部HTML：

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

并以DOM方式使用它：

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

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 拔出本机元素，然后使用 outerHTML 作为 ：

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

或者

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