Creating nested elements in JQuery using $() constructor

Question

I can't get JQuery's $() element constructor to work right. The following works right (using expect.js for the expect() calls):

var p = $('<div id="1"><div id="2">middle div</div></div>');
expect(p.children('div')).not.to.be(undefined); //passes
expect(p.children('div').attr('id')).to.equal('2'); //passes

But the following doesn't work

var p = $('<p id="1"><div id="2">middle div</div></p>');
expect(p.children('div')).not.to.be(undefined); //passes
expect(p.children('div').attr('id')).to.equal('2'); //fails

Any tips on how to get this to work right?

Niko · Accepted Answer · 2013-02-28 05:58:15Z

3

The HTML markup is wrong. You cannot put a block-level element like <div> into a <p> element. That's why the HTML is actually (I think this depends on the browser) most likely parsed as:

<p id="1"></p><div id="2">middle div</div>

or (in chrome):

<p id="1"></p><div id="2">middle div</div><p></p>

You can verify this easily via console.log(p);

answered Feb 28, 2013 at 5:58

Niko

26.8k9 gold badges97 silver badges112 bronze badges

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

1 Comment

Nate Glenn Over a year ago

Fixed it right up! Thanks. Here's a quick ref for what can contain what for future reference: risd.generic.cx/containment.html

the system · Accepted Answer · 2013-02-28 05:58:00Z

1

The <div> is being ejected because it's not valid to have a <div> inside a <p>.

answered Feb 28, 2013 at 5:58

the system

9,35642 silver badges47 bronze badges

Comments

ryandawkins · Accepted Answer · 2013-02-28 06:02:33Z

1

You should try this:

expect($('#1').find('div').attr('id').to.equal('2');

Edit: Niko and The System are right.. a div cannot be in a p though.

answered Feb 28, 2013 at 6:02

ryandawkins

1,5455 gold badges26 silver badges38 bronze badges

Collectives™ on Stack Overflow

Creating nested elements in JQuery using $() constructor

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related