JQuery DOM creation/handling issue

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

---

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.

---

you could try this;

var DIV = document.createElement('div'); 

then you can use;

$(div).html('Test!');

or what ever you want to use with.

---

You don't have to get anything back from the DOM. Once you create the element with jQuery, you already have a reference to the DOM element. Inserting it into the document does not do anything special.

// this will create the DOM element, and the jQuery
// object wrapping that newly created DOM object
// is assigned to DIV.
var DIV = $("<div>Hello, world</div>");
// Don't worry about getting a return value from this
// append() call. What we need is already available inside
// the variable DIV.
$(OriginalDiv).append(DIV);

// continue using DIV as you normally would. It is referring
// to the same DOM object that was just appended to the document.
DIV.addClass('green');