How do I extract a HTML string from my jQuery selection?

Question

My HTML code is constructed in such a way that it is in following format :

var s = $('<input type="date" id="date-value"/>');

I want to extract the html inside my jQuery selection, as a separate element:

 <input type="date" id="date-value"/>

I tried various inbuilt methods like s.text(), s.innerHTML etc, but they didn't work.

JSFiddle : http://jsfiddle.net/fkgaqtb2/

I fail to understand what you are wanting? You are already creating the new element with your `append` statement (on your fiddle) — JClaspill, Jun 08 '15 at 22:03
@EdCottrell Because it doesn't work. But true, the better question is _why_? — Etheryte, Jun 08 '15 at 22:03
@JClaspill I am just appending to see whether s is valid or not. But my main intention is to extarct the HTML inside the element. — budhavarapu ranga, Jun 08 '15 at 22:04
@JClaspill s.html returns a Jquery function, but not the raw HTML inside the element. — budhavarapu ranga, Jun 08 '15 at 22:08

score 1 · Accepted Answer · edited May 23 '17 at 12:05

1

If you want a new element from the selector, use jQuery's .clone function. alert(s.clone().prop('outerHTML'));

That will output the string it looks like you're trying to get in your fiddle.

In any case, if you just want a string representation of the element, remember that s is a selector, so you'll need jQuery's .prop method. You want:
s.prop('outerHTML').

FYI, this version of the question is similar to another.
Rememeber that HTML elements (not jQuery selections, that's why we need prop) have an outerHTML too, not just innerHTML!

edited May 23 '17 at 12:05

Community

1
1

answered Jun 08 '15 at 22:07

Sze-Hung Daniel Tsui

2,282
13
20

In that case, wouldn't it be better to mark it as a duplicate? – Anonymous Jun 08 '15 at 22:08
I sadly don't know how, or don't have the rep/permissions yet. Care to provide a link that explains how to do so? Thanks! – Sze-Hung Daniel Tsui Jun 08 '15 at 22:14
1

You can click the "flag" option on the question > go to "a duplicate..." > put in the link to the duplicate question > click "vote to close". – Anonymous Jun 08 '15 at 22:15

score 0 · Answer 2 · answered Jun 08 '15 at 22:07

0

Create a temporary div, then clone your element and append to it:

alert($('<div>').append(s.clone()).html());

answered Jun 08 '15 at 22:07

Tuan Anh Hoang-Vu

1,994
1
21
32

score 0 · Answer 3 · answered Jun 08 '15 at 22:07

If you want the outer html, you can use:

var s = $('<input type="date" id="date-value"/>');
$('<div>').append(s.clone()).html();

Or if you need it often, you can add a new method:

$.fn.outerHtml=function(){
    return $('<div>').append(this.clone()).html();
}

And then you can just use: s.outerHtml();

How do I extract a HTML string from my jQuery selection?

3 Answers3