Creating a jQuery object from a big HTML-string

Question

I have a big HTML-string containing multiple child-nodes.

Is it possible to construct a jQuery DOM object using this string?

I've tried $(string) but it only returns an array containing all the individual nodes.

Imtrying to get an element which i can use the .find() function on.

Where is the HTML, what do you want to construct with it? You may want to look at the .find() function: api.jquery.com/find — Control Freak
– Control Freak, Commented Jun 15, 2012 at 9:08
A jQuery object is an array-like object containing all the nodes. Can you elaborate on what you're trying to achieve? — Frédéric Hamidi
– Frédéric Hamidi, Commented Jun 15, 2012 at 9:09
Take a look here,I think it is what you want stackoverflow.com/q/759887/474535 — bart s
– bart s, Commented Jun 15, 2012 at 9:12
I have to pass the element from one WebView to another through a string, the string would just be the HTML source of that element. I think i might have missunderstood what a jQuery object is. — user1033619
– user1033619, Commented Jun 15, 2012 at 9:14

Community · Accepted Answer · 2020-06-20 09:12:55Z

246

Update:

From jQuery 1.8, we can use $.parseHTML, which will parse the HTML string to an array of DOM nodes. eg:

var dom_nodes = $($.parseHTML('<div><input type="text" value="val" /></div>'));

alert( dom_nodes.find('input').val() );

DEMO

var string = '<div><input type="text" value="val" /></div>';

$('<div/>').html(string).contents();

DEMO

What's happening in this code:

$('<div/>') is a fake <div> that does not exist in the DOM
$('<div/>').html(string) appends string within that fake <div> as children
.contents() retrieves the children of that fake <div> as a jQuery object

If you want to make `.find()` work then try this:

var string = '<div><input type="text" value="val" /></div>',
    object = $('<div/>').html(string).contents();

alert( object.find('input').val() );

DEMO

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 15, 2012 at 9:11

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

thecodeparadox Over a year ago

@user1033619 you can perform .find() operation also, check the demo

fdrv Over a year ago

But how if string = '<input type="text" value="val" />'

xr280xr Over a year ago

If you can do $("<div/>"), why can't you do $(string)?

Simon Hutchison Over a year ago

With more complex HTML I needed to remove .contents to get this to work. jsfiddle.net/h45y2L7v

Michael Khalili Over a year ago

You don't want to do $(string) because you need a wrapping div to get the contents of. You'll be getting the contents of the div, which will be your input.

|

Daniel Sokolowski · Accepted Answer · 2016-02-12 19:31:18Z

128

As of jQuery 1.8 you can just use parseHtml to create your jQuery object:

var myString = "<div>Some stuff<div>Some more stuff<span id='theAnswer'>The stuff I am looking for</span></div></div>";
var $jQueryObject = $($.parseHTML(myString));

I've created a JSFidle that demonstrates this: http://jsfiddle.net/MCSyr/2/

It parses the arbitrary HTML string into a jQuery object, and uses find to display the result in a div.

edited Feb 12, 2016 at 19:31

Daniel Sokolowski

12.5k4 gold badges75 silver badges58 bronze badges

answered May 31, 2013 at 14:29

kiprainey

3,3014 gold badges31 silver badges29 bronze badges

9 Comments

ZeeCoder Over a year ago

I find this answer far better, since this don't have to use a ghost div element. $.parseHtml ftw.

dougajmcdonald Over a year ago

This answer didn't work for me when I wanted then then to $jQueryObject.find(), I presume because it wasn't added to the dom at that point.

kiprainey Over a year ago

@dougajmcdonald -- find should work without the content being added to the dom. If you take a look at my fiddle (jsfiddle.net/MCSyr/2), I'm calling find on the jQuery object, and it returns a result as expected: $jQueryObject.find("#theAnswer").html()

dougajmcdonald Over a year ago

@kiprainey interesting, I'll dig out the example it didn't for me on and see if there was something else afoot. It was written inside a TypeScript module inside a load of other logic, could well have been a different issue! My apologies.

Jean-Michel Garcia Over a year ago

Worth mentioning that parseHTML was added in jQuery 1.8

|

Florian Margaine · Accepted Answer · 2012-06-15 09:09:30Z

13

var jQueryObject = $('<div></div>').html( string ).children();

This creates a dummy jQuery object in which you can put the string as HTML. Then, you get the children only.

answered Jun 15, 2012 at 9:09

Florian Margaine

61.2k15 gold badges94 silver badges120 bronze badges

2 Comments

user1033619 Over a year ago

ive tried this, but it doesnt work with the .find() function i have to use later.

Kulbir Saini Over a year ago

@user1033619 you got to use .filter() instead of .find().

Loourr · Accepted Answer · 2015-11-16 02:03:39Z

2

There is also a great library called cheerio designed specifically for this.

Fast, flexible, and lean implementation of core jQuery designed specifically for the server.

var cheerio = require('cheerio'),
    $ = cheerio.load('<h2 class="title">Hello world</h2>');

$('h2.title').text('Hello there!');
$('h2').addClass('welcome');

$.html();
//=> <h2 class="title welcome">Hello there!</h2>

answered Nov 16, 2015 at 2:03

Loourr

5,12510 gold badges46 silver badges69 bronze badges

Comments

Anthony · Accepted Answer · 2016-11-30 13:29:00Z

2

I use the following for my HTML templates:

$(".main").empty();

var _template = '<p id="myelement">Your HTML Code</p>';
var template = $.parseHTML(_template);
var final = $(template).find("#myelement");

$(".main").append(final.html());

Note: Assuming if you are using jQuery

answered Nov 30, 2016 at 13:29

Anthony

311 bronze badge

Comments

Chetan · Accepted Answer · 2017-05-03 23:26:39Z

1

the reason why $(string) is not working is because jquery is not finding html content between $(). Therefore you need to first parse it to html. once you have a variable in which you have parsed the html. you can then use $(string) and use all functions available on the object

answered May 3, 2017 at 23:26

Chetan

5,1239 gold badges52 silver badges61 bronze badges

Comments

Chirag · Accepted Answer · 2020-09-05 07:53:09Z

0

You can try something like below

$($.parseHTML(<<table html string variable here>>)).find("td:contains('<<some text to find>>')").first().prev().text();

answered Sep 5, 2020 at 7:53

Chirag

1,53016 silver badges20 bronze badges

Comments

horace · Accepted Answer · 2022-11-08 21:33:45Z

0

I know this is an old thread, but I have another simple answer. jQuery has moved up quite a few versions and I'm on 1.13.x

Not being an expert jQuery programmer, I näively used:

var el = $( "#thecontainer" ).append( "<legit, lengthy html>" );

And presto! It worked: el is now a fully operational jQuery dom element.

I have been testing it out over the past couple of days and it seems to work as expected.

edited Nov 8, 2022 at 21:33

answered Nov 7, 2022 at 1:02

horace

95810 silver badges20 bronze badges

Comments

Hakan · Accepted Answer · 2024-05-18 12:07:35Z

0

Why it alerts as 0 length ?

$(function(){   
 

var rrr=$('<html><body><div class="new">aaaa</div></body></html>');
    
alert(rrr.find('.new').length)  //return 0


})

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

answered May 18, 2024 at 12:07

Hakan

7127 silver badges8 bronze badges

Collectives™ on Stack Overflow

Creating a jQuery object from a big HTML-string

9 Answers 9

Update:

What's happening in this code:

If you want to make `.find()` work then try this:

7 Comments

9 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Update:

What's happening in this code:

If you want to make .find() work then try this:

7 Comments

9 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

If you want to make `.find()` work then try this: