Getting the HTML of an element in jQuery

Question

I was trying to get the entire HTML of an element using jQuery. Of course, .html() grabs only the inner HTML, but I wanted to retrieve the wrapping HTML too.

Imagine the following HTML:

<div id="wrapper">
    <div id="container_a">
        <p>Container A</p>
    </div>
    <div id="container_b">
        <p>Container B</p>
    </div>
</div>

Now, If I would do $("#container_a").html() I'd get <p>Container A</p> clearly. However, I want to get the following:

<div id="container_a">
    <p>Container A</p>
</div>

How would I achieve this?

Yeah, looks like it. Google let me down on my search :| – Deltanic Jun 13 '13 at 11:20 — Deltanic, Jun 13 '13 at 11:20

score 3 · Accepted Answer · answered Jun 13 '13 at 11:12

3

You can do this using prop:

$("#container_a").prop('outerHTML');

FIDDLE DEMO

answered Jun 13 '13 at 11:12

palaѕн

72,112
17
116
136

2

Nice to see there's a jQuery-ish way (albeit it really seems like a bit of overkill, tbh) ... now I'm going to have to sift through the source code to see if `prop()` is actually proxying ... – vzwick Jun 13 '13 at 11:14
@vzwick Any update on that so far? – Deltanic Jun 13 '13 at 14:41
@vzwick All it really does is "fix" some things (like trying to access the `class` property, it changes it to `className` internally), but ends up just returning `element[ name ]` – Ian Jun 13 '13 at 17:08

score 1 · Answer 2 · answered Jun 13 '13 at 11:10

1

use outerHTML

$("#container_a")[0].outerHTML

using plain javascript

document.getElementById("container_a").outerHTML;

answered Jun 13 '13 at 11:10

bipen

36,319
9
49
62

score 1 · Answer 3 · answered Jun 13 '13 at 11:14

1

First use clone for temporary then get html

$('div').append($('#container_a').clone()).html();

answered Jun 13 '13 at 11:14

som

4,650
2
21
36

1

this solution as i'm aware of is the only one which work on older jquery/browser versions – A. Wolff Jun 13 '13 at 11:23

score 1 · Answer 4 · answered Jun 13 '13 at 11:19

1

This should work

<script>
    var a=document.getElementById("container_a").outerHTML;
    alert(a);
</script>

Instead of alert we may use variable a in any other way...

answered Jun 13 '13 at 11:19

score 0 · Answer 5 · answered Jun 13 '13 at 11:09

0

use outerHTML

$("#container_a")[0].outerHTML

Demo ---> http://jsfiddle.net/uBDHY/1/

https://developer.mozilla.org/en-US/docs/Web/API/element.outerHTML

answered Jun 13 '13 at 11:09

Adil Shaikh

44,509
17
89
111

score 0 · Answer 6 · answered Jun 13 '13 at 11:09

0

you can use .outerHTML for this

$("#container_a")[0].outerHTML

answered Jun 13 '13 at 11:09

PSR

39,804
41
111
151

`$("#container_a")` - the `#` makes a difference. – vzwick Jun 13 '13 at 11:10
@vzwick Thanks i updated it – PSR Jun 13 '13 at 11:10

Getting the HTML of an element in jQuery

6 Answers6