I try to get the outer HTML in two different ways, based on this question. Unfortunately, none of them is giving 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'))) + ']');
});

The output is:

[
Hello
]
[
Hello
]

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

Live example here

What am I doing wrong ?

I try to get the outer HTML in two different ways, based on this question. Unfortunately, none of them is giving 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'))) + ']');
});

The output is:

[
Hello
]
[
Hello
]

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

Live example here

What am I doing wrong ?

• javascript
• jquery
• html
• outerhtml

• possible duplicate of How do I do OuterHTML in firefox? – Peter Ajtai Commented Sep 19, 2010 at 21:39
• Your first code snippet works, and your second one almost works. Look at the HTML of the page. The output looks like plain text because it is rendered as HTML..... Note the newlines.... DIVS! – Peter Ajtai Commented Sep 19, 2010 at 21:47
• Great example of how to ask a question. This is what I'm doing. Here's the code. Here's what's happening. This is what I'm expecting to happen. – Jaco Pretorius Commented Sep 29, 2010 at 7:29

5 Answers 5

First, your first example works fine. Take a look at your output in Firebug. Note, that since your output is HTML it is rendered as HTML. Note that there are newlines before and after the HELLO............... because the HELLOs are inside DIVs!

Take a look:

Second w/ jQuery, you could also use the method in my answer to the question you linked to:

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

jsFiddle example

This appends a clone of the element in question to a DIV jQuery object and gets the inner HTML of the DIV jQuery object.... which is the outerHTML of the element in question.

The general form of the outerHTML of an element is:

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

where ElementSelector is the jQuery selector of the element whose outerHTML you want.

Note: The above adds no new elements to the DOM. $('<div>')...... is never added to the DOM. It remains merely jQuery object independent of the DOM.

Here is a function used in the lib pure.js to get the outerHTML:

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

And to use it the DOM way:

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

UPDATE With DEMO

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

• htmlspecialchars function

try this:

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

You can use get to pull out native DOM element and then use the outerHTML as :

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

or

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