How to select recently appeded element in jquery?

Question

I want to select recently created element doing something like this:

$("body").append("<div id='popup.dialog'></div>");
dialogDiv = $("#popup.dialog");

But after execution of this dialogDiv contains nothing. So is there're way to select newly createn element?

Answer 1

I think your problem is the . in the id.

The reason is, that jQuery used the . to match classes, so you are looking for an element with id = popup and class = dialog

Answer 2

You can't have a . in an id.

Try this:

$("body").append("<div id='popup-dialog'></div>");
dialogDiv = $("#popup-dialog");

Answer 3

Two things:

1) Dont use periods in your ids

2) you could do it like this a bit better:

var dialogDiv =$('<div id="popup-dialog"></div>').appendTo('body');

At this point you could chain more, or just use the dialogDiv variable.

This stops you from taking a performance hit by selecting an element that you already have access to.

Answer 4

The dot is not valid in the ID. #popup.dialog searches for <div id='popup' class='dialog'>. You should replace it with a dash, like

$("body").append("<div id='popup-dialog'></div>");
dialogDiv = $("#popup-dialog");