Why getting an outer HTML does not work?

Question

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 ?

Digression

possible duplicate of How do I do OuterHTML in firefox? – Schmitt

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! – Schmitt

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. – Emanuel

Answer 1

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.

Schmitt

Answer 2

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'));

Nenitanenney

+1 - Nice answer. You should post it in the original question about this. – Schmitt

Answer 3

UPDATE With DEMO

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

• htmlspecialchars function

Subsume

All I want is to get the outer HTML of a given element, in my case: $('#my_div'). I don't want to add elements to DOM. – Digression

so for example, you want get the wrapper of my div!? assuming a code like this: <div id='wrapper'><div id='my_div'>Hello</div></div> ? – Subsume

The thing is that I don't have any wrapper, and preferably I don't want to create one... Again, all I have is an element, and I want to get its outer HTML. Simple like that :) – Digression

@Misha - $('<div>')... doesn't create a wrapper for #my_div or add any elements to the DOM. It makes a copy of #my_div and appends it to a <div> that is not part of the DOM. That other DIV is just a jQuery object used the extract the outer HTML of #my_div......... See my answer for an explanation of why you thought your first code snippet didn't work; even though, it did. – Schmitt

Answer 4

try this:

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

Saxton

you need to escape the output to see it correctly => jsbin.com/enexi4/3/edit – Saxton

No need for $('<div></div>'). $('<div>') will also work... and the fastest is $('<div/>').... If speed isn't an issue, I prefer $('<div>') for readability. – Schmitt

Peter, what is the difference between $('<div></div>'), $('<div>'), and $('<div/>') ? – Digression

Answer 5

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;

Poulterer