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 ?

possible duplicate of [How do I do OuterHTML in firefox?](http://stackoverflow.com/questions/1700870/how-do-i-do-outerhtml-in-firefox) — Peter Ajtai, Sep 19 '10 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, Sep 19 '10 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, Sep 29 '10 at 07:29

Mic · Answer 1 · 2010-09-29T07:26:04.770

5

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

edited Sep 29 '10 at 07:26

answered Sep 19 '10 at 20:23

Mic

24,812
9
57
70

+1 - Nice answer. You should post it in the [original question about this](http://stackoverflow.com/questions/1700870/how-do-i-do-outerhtml-in-firefox). – Peter Ajtai Sep 19 '10 at 22:14

score 5 · Accepted Answer · edited May 23 '17 at 12:25

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: alt text

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.

Luca Filosofi · Answer 3 · 2010-09-19T16:09:05.867

2

UPDATE With DEMO

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

htmlspecialchars function

edited Sep 19 '10 at 16:09

answered Sep 19 '10 at 14:18

Luca Filosofi

30,905
9
70
77

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. – Misha Moroshko Sep 19 '10 at 14:27
so for example, you want get the wrapper of my div!? assuming a code like this: `
Hello
` ? – Luca Filosofi Sep 19 '10 at 14:32
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 :) – Misha Moroshko Sep 19 '10 at 14:55
@Misha - `$('
')...` 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 `
` 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.
– Peter Ajtai Sep 19 '10 at 21:59

ipsum · Answer 4 · 2010-09-19T14:46:44.190

0

try this:

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

edited Sep 19 '10 at 14:46

answered Sep 19 '10 at 14:32

ipsum

1,042
7
17

2

you need to escape the output to see it correctly => http://jsbin.com/enexi4/3/edit – ipsum Sep 19 '10 at 15:10
No need for `$('
')`. `$('
')` will also work... and the fastest is `$('
')`.... If speed isn't an issue, I prefer `$('
')` for readability.
– Peter Ajtai Sep 19 '10 at 21:54
Peter, what is the difference between `$('
')`, `$('
')`, and `$('
')` ?
– Misha Moroshko Sep 20 '10 at 03:23

score 0 · Answer 5 · answered Feb 16 '19 at 15:03

0

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;

answered Feb 16 '19 at 15:03

Er Mayank

1,017
2
16
39

Why getting an outer HTML does not work?

5 Answers5

jsFiddle example