Проблема создания / обработки JQuery DOM

Question

Итак, скажем, я выбрал в JQuery отдельный DOM div. Затем я продолжаю создавать новый DIV примерно так:

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

После этого я пытаюсь поместить этот DIV в исходный файл так:

$(OriginalDiv).append(DIV);

Хорошо, это работает. Теперь я хочу редактировать DIV дальше.

Звонки .click, .html, .addClass, (и, вероятно, больше) не работают! Хорошо, вместо этого я делаю:

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

Кажется, сначала это сработает; Однако вместо этого он устанавливает DIV для ссылки на тот же объект DOM, что и OriginalDiv, а НЕ на вновь добавленный объект DOM. Естественно, это не позволяет мне редактировать DIV.

Итак, я попробую еще два метода:

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

и

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

Даже эти работы не работают.

Если я не очень хорошо объяснил, вот моя точная дилемма

Я пытаюсь создать объект DOM в jquery, а затем добавить его к другому объекту DOM с помощью jquery. Проблема в том, что, как только он будет добавлен, у меня не будет возможности напрямую получить к нему доступ, не используя что-то вроде .children.

Мне бы очень хотелось, чтобы где-то прямо в этом процессе была возвращена ссылка на объект DOM, который я добавляю. Как в том, который действительно добавляется.

Я не уверен, как это сделать в JQuery. Кто-нибудь знает решение?

Спасибо

- G

Answer 1

Да, append не будет работать, так как возвращает ссылку на элемент, к которому был добавлен новый элемент.jQuery поддерживает цепочку методов, поэтому это должно работать легко:

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

Но даже

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

будет работать.appendTo возвращает ссылку на элемент, который был добавлен.Если это не работает для вас, у вас есть проблема в другом месте.

---

Комментарии к вашему коду: Это не ваша проблема, однако вам важно знать, что здесь происходит.

Эта часть

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

совпадает с

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

Видите ли, у вас есть вложенный вызов jQuery, поскольку DIV уже является объектом jQuery.Нет необходимости передавать его снова в jQuery.

Вы также можете напрямую передать селектор на appendTo.

Answer 2

Вам не нужно ничего возвращать из DOM.После создания элемента с помощью jQuery у вас уже есть ссылка на элемент DOM.Вставка его в документ не делает ничего особенного.

// 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');

Answer 3

вы можете попробовать это;

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

тогда вы можете использовать;

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

или что вы хотите использовать.