after() and before() fail after newly created jquery elements

[Larry Battle]

I have notice that the after() and before() functions fail after a statement like $("<tag/>") has been made.

When trying to create the following format, anything inside after() is before() are not created.

Desired.

<span>Some </span> <b>more</b>

Code.

$("<span/>").text("Some ").after( "<b>more</b>" )

$("<span/>").text("more").before( "<b>Some </b>" )

Result. <span>Some </span> or nothing after()

<span>more</span> or nothing before()

Link to example:

​http://jsbin.com/ivido

[dmethvin]

The before() and after() methods expect that they will be used on elements that are already in a DOM document--the element needs a parentNode. I actually see an error in Firebug for the example above.

The cases you have above can be easily expressed as a single html string; was this a test case for a more complex situation?

I'd be inclined to just document this limitation; it's messy to fix. You'd need to inject new elements into the jQuery object and would probably need to pushStack since you're changing the object's internal state.

[Larry Battle]

I am just a little disappointed because append() works with newly created variable elements but after() does not. My real task was something similar to the following.

var form = $( '<form/>' ); form.append(

$( "<input type='radio'" ).attr( 'value','1' ).after( $( '<label/>' ).text('true') ) .after(

$( "<input type='radio'" ).attr( 'value','0' ).after( $( '<label/>' ).text('false') )

)

);

But I think that using a string statement will be best. Thank you for your reply.

[john]

Larry, in your case you should just do:

var form = $('<form/>').append(
    $("<input type='radio'/>").attr('value','1'),
    $('<label/>').text('true'),
    $("<input type='radio'/>").attr('value','0'),
    $('<label/>').text('false')
);

I've added notes to all the documentation pages so I'm closing this bug now.

[Larry Battle]

That was the solution I was looking for. Thanks, john!! However, if you could, could you include that example into the documentation somehow? I didn't realize that append() and other functions could take arrays of jQuery objects like that.

So..

The elements must already be inserted into the document (you can't insert an element after another if it's not in the page).

Would look better as..

The elements must already be inserted into the document (you can't insert an element after another if it's not in the page).

The following will work.

var form = $('<form/>').append(
  $("<input type='radio'/>").attr('value','1'),
  $('<label/>').text('true')
);

But this will not.

var form = $('<form/>').append(
  $("<input type='radio'/>").attr('value','1').after(
    $('<label/>').text('true')
  )
);

[john]

Fixed in SVN rev [6553].