Question

So, say I have selected, in JQuery, a singular DOM div.
I then proceed to create a new DIV like so:

var DIV = $("<div>Hello, world</div>");

After that, I attempt to place that DIV inside the original one like so:

$(OriginalDiv).append(DIV);

Okay, that works.
Now I want to edit DIV further.

Calls to .click, .html, .addClass, (And likely more) do not work!
Okay, instead I do:

var OriginalDiv = $("someSelector");
var DIV = $("<div>Hello, world</div>");
DIV = $(OriginalDiv).append(DIV);

That appears to work at first; However, instead, it sets DIV to reference the same DOM object as OriginalDiv and NOT the newly appended DOM object. Naturally, this does not allow me to edit DIV.

So, then, I try two more methods:

var OriginalDiv = $("someSelector");
var DIV = $("<div>Hello, world</div>");
$(DIV).appendTo(OriginalDiv);

and

var OriginalDiv = $("someSelector");
var DIV = $("<div>Hello, world</div>");
DIV = $(DIV).appendTo(OriginalDiv);

Not even these work.

If I haven’t done a very good job explaining, here is my exact dilemma

I am trying to create a DOM object in jquery, then append it to another DOM object using jquery. The problem is, once it gets appended, there seems to be no way for me to directly access it without using somethign like .children.

I’d like very much to be directly returned somewhere along in that process a reference to the DOM object which I am appending. As in the one that actually gets appended.

I’m not sure how to do this in JQuery. Anybody know a solution?

Thanks

–G

Answer 1

Yes, append won’t work as it returns a reference to the element the new element was appended to. jQuery supports method chaining, so this should work easily:

$("<div>Hello, world</div>")
 .click(function() {
    // something
  })
 .appendTo('someSelector');

But even

var $ele = $("<div>Hello, world</div>").appendTo('someSelector');

will work. appendTo returns a reference to the element which was appended. If this does not work for you, you have your problem elsewhere.

---

Comments on your code: This is not your problem, however it is important for you to know what is going on here.

This part

var OriginalDiv = $("someSelector");
var DIV = $("<div>Hello, world</div>");
$(DIV).appendTo(OriginalDiv);

is the same as

$($("<div>Hello, world</div>")).appendTo($("someSelector"));

You see, you have a nested call to jQuery, because DIV is already a jQuery object. There is no need to pass it again to jQuery.

You can also pass a selector directly to appendTo.