Why doesn't getting external HTML work?

Question

I am trying to get external HTML in two ways based on this question . Unfortunately, none of them gives the expected result:

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'))) + ']');
});

Conclusion:

[
Hello
]
[
Hello
]

I expect the following result: <div id='my_div'>Hello</div>

Real time example here

What am I doing wrong?

Answer 1

-, . Firebug. , HTML, HTML. , HELLO..............., HELLO DIVs!

:

---

w/jQuery, , :

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

jsFiddle

DIV jQuery HTML DIV jQuery.... outerHTML .

outerHTML :

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

ElementSelector - jQuery , outerHTML.

---

. DOM. $('<div>')...... DOM. jQuery, DOM.

Answer 2

, lib pure.js, outerHTML:

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

DOM:

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

Answer 3

The UPDATE . Demo

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

• htmlspecialchars function

Answer 4

try the following:

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