jQuery get DOM element as string

Question

Say I have

$(":input[type=text]:first")

How do I get

<input type="text" value="" size="28" maxlength="140" tabindex="1" placeholder="search" class="textbox" name="q" autocomplete="off">

Assuming I run this on SO?

Update I don't want to call .parent() since I have lots of other stuff in the parent element.

Just a note: you really should quote your attribute selectors. `$(":input[type='text']:first")`. — gen_Eric, Nov 14 '11 at 19:46
Yeah it was merely an example, that's not the actual selector. I usually try and avoid using attribute selectors anyways. — bevacqua, Nov 14 '11 at 19:47
possible duplicate of [Get selected element's outer HTML](http://stackoverflow.com/questions/2419749/get-selected-elements-outer-html) — Blazemonger, Nov 14 '11 at 19:50
@Rocket There's no difference using quotes in the attribute selector. — MacMac, Nov 14 '11 at 19:58
@lolwut: From the [jQuery docs](http://api.jquery.com/category/selectors/attribute-selectors/): "Attribute values in selector expressions **must** be surrounded by quotation marks." — gen_Eric, Nov 14 '11 at 20:04

score 51 · Answer 1 · answered Sep 01 '15 at 14:14

51

How about

$(selector).prop("outerHTML");

answered Sep 01 '15 at 14:14

William

8,007
5
39
43

score 23 · Accepted Answer · edited May 23 '17 at 11:54

23

An old trick:

var selector = ":input[type=text]:first";

var str = $(selector).clone().wrap('<div/>').parent().html();

Update You don't need to worry about calling .parent() since you're working with an orphaned clone of the original selector.

edited May 23 '17 at 11:54

Community

1
1

answered Nov 14 '11 at 19:44

Blazemonger

90,923
26
142
180

1

Why is the clone important? If I'm creating an item on the fly, would that matter? – casraf Apr 01 '14 at 08:56
1

The inner element isn't created on the fly; it's being selected from the DOM, so we clone it to avoid altering the DOM. – Blazemonger Apr 01 '14 at 13:20
What about $("a").html('').prop("outerHTML") ) ? – Shulyk Volodymyr Jul 28 '16 at 12:49
@ShulykVolodymyr Congratulations, you've just destroyed the contents of every anchor element on the page. – Blazemonger Jul 28 '16 at 15:35
Is there any benefit of using this trick, as opposed to a concise @WDuffy answer: http://stackoverflow.com/a/32333935/1707382 ? – SlavaSt Apr 18 '17 at 21:33

John Hartsock · Answer 3 · 2011-11-14T19:48:48.843

5

Use jQuery.html() by appending to a created element.

$('<div/>').append($(":input[type=text]:first").clone()).html()

Here is a fiddle providing an example: http://jsfiddle.net/Zwbmx/1/

edited Nov 14 '11 at 19:48

answered Nov 14 '11 at 19:42

John Hartsock

85,422
23
131
146

1

But you've now moved the original element out of the DOM. – Blazemonger Nov 14 '11 at 19:48
This will remove the input from the DOM and append it to a newly created div. You need to clone the input first. – gen_Eric Nov 14 '11 at 19:48
1

@Rocket your right I modified the code to clone the element first. – John Hartsock Nov 14 '11 at 19:49
LOL Years later and I get the random downvote. And no comment left. – John Hartsock Apr 25 '14 at 17:43

score 0 · Answer 4 · answered Sep 03 '14 at 05:53

Following on what @Blazemonger have answered, if you are going to send this html content to the server, it's worth to get rid of all unnecessary tags, white-spaces and line-breaks that don't add any value.

var quote = $(".invoice") //get hidden print-version DOM element
    .clone()
    .wrap('<div/>')
    .parent()
    .html()
    .replace(/    /g, '') //get rid of indentation spaces
    .replace(/(\r\n|\n|\r)/gm, "") //get rid of line breaks
    .replace(/<!--[\s\S]*?-->/g, ""); //get rid of comment tags

My html had 50kb, after getting rid of this stuff, it got reduced to 4kb!

score -1 · Answer 5 · answered Apr 23 '14 at 14:38

-1

How about:

var str = $(selector)[0]

Maybe add a check that there is one element returned.

answered Apr 23 '14 at 14:38

Tarion

16,283
13
71
107

jQuery get DOM element as string

5 Answers5

Linked