Find id element inside JSON html content using jQuery

Question

I am returning JSON inside an ajax request which has html as one of its values.

html:
"<div id="foo">
    <p>FOO</p>
</div>

<div id="bar">
    <p>BAR</p>
</div>"

I would like to add #foo to one element and #bar to another. I have tried the following:

$('#add-foo-html-here').html($(response.html).find('#foo'));

but this fails to find #foo. What is the best way to do this? Should I be adding the html content to a temp element and then finding the id?

I'm guessing the element you are inserting to actually has the ID #this (does seem strange)? If the HTML is valid (there are some quoting issues above), it should work! Also, if they don't have a parent, you can't find() them, you'd need to append to them to an empty parent first. — adeneo
– adeneo, Commented Feb 26, 2013 at 10:49
Sorry that was just an example. I'll update it for clarification. — xylar
– xylar, Commented Feb 26, 2013 at 10:51

pktangyue · Accepted Answer · 2013-02-26 10:54:43Z

2

Use .filter() instead of .find().

$('#add-foo-html-here').html($(response.html).filter('#foo'));

.find() only find the children elements. But here #foo is not a child.

answered Feb 26, 2013 at 10:54

pktangyue

8,5949 gold badges53 silver badges72 bronze badges

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

Comments

adeneo · Accepted Answer · 2013-02-26 10:52:00Z

1

You'll need a parent to use find() ???

var div = $('<div />');
    div.html(response.html);

$('#elementID').html( div.find('#foo') );

answered Feb 26, 2013 at 10:52

adeneo

319k29 gold badges410 silver badges392 bronze badges

Thanks for the clarification with the find(). This is what I was going to do when creating the temp element.