jQuery: Get HTML including the selector?

Question

Say I have this HTML:

<ul>
  <li id="example"><strong>Awesome</strong> example text</li>
</ul>

I want to be able to do something like $('#example').html() but right now doing that obviously only gets <strong>Awesome</strong> example text.

So how can I get the HTML including the selected element?

ie. <li id="example"><strong>Awesome</strong> example text</li>

I'm using jQuery 1.4.4.

Duplicate of http://stackoverflow.com/questions/2419749/jquery-get-selected-elements-outer-html — bradley.ayers, Apr 07 '11 at 21:29
http://stackoverflow.com/questions/2419749/jquery-get-selected-elements-outer-html is the best approach I have known yet. — Moiz Tankiwala, Aug 10 '13 at 06:50

score 56 · Accepted Answer · edited Aug 31 '17 at 16:36

56

In this specific case:

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

See this page for more details.

And the discussion here: http://api.jquery.com/html/ (this explains that this isn't in jQuery core and why some logical solutions won't work)

edited Aug 31 '17 at 16:36

Michael Dodd

answered Apr 07 '11 at 21:29

Jamie Wong

why don't to use `wrap`? It is cleaner, I think – fl00r Apr 07 '11 at 21:35
6

Because using wrap actually affects the DOM tree displayed to the user. This doesn't. – Jamie Wong Apr 07 '11 at 21:37
I'm being thrown by the $("
") selector. I am accustomed to seeing $('div'), but not with the brackets and such. Can you, or someone, explain to me what that is doing? Also, it is desirable not to add it to the DOM, but, again, I'm confused why it doesn't. I think if I understood the first part, I'd understand why. Can anyone explain? – Steve C. Mar 24 '14 at 18:57
2

@SteveC. "
" isn't a selector here. `$("
")` constructs a new div element. See: http://api.jquery.com/jQuery/#jQuery2 – Jamie Wong Apr 01 '14 at 03:50

phixr · Answer 2 · 2011-04-07T21:53:15.653

6

You could try this:

var html = $('<div>').append($('#example').clone()).html();

edited Apr 07 '11 at 21:53

answered Apr 07 '11 at 21:31

phixr

1

is the remove() necessary? Is some kind of memory leak produced otherwise? – Jamie Wong Apr 07 '11 at 21:34
1

Guess it's not necessary if it never gets added to the dom. Updated my answer. – phixr Apr 07 '11 at 21:53

score 2 · Answer 3 · answered Apr 07 '11 at 21:30

2

For browsers that support it, outerHTML can do that. There are jQuery plugins like this and this that enable support via some clever jQuery.

answered Apr 07 '11 at 21:30

Dominic Barnes

score -2 · Answer 4 · answered Jul 31 '12 at 12:03

-2

var outerHtml = $('#example').detach();

answered Jul 31 '12 at 12:03

Andrey Popov

The .detach() method is the same as .remove() , except that .detach() keeps all jQuery data associated with the removed elements – Divyesh Kanzariya Aug 31 '17 at 14:45

score -4 · Answer 5 · answered Jan 29 '13 at 13:05

-4

Anything wrong with simply using $('#example') ? This grabs the whole thing!

answered Jan 29 '13 at 13:05

ben

7

this grabs the jquery object of this element, not the html string – Rito Feb 20 '13 at 14:24

5 Answers5