добавить узел DOM

#jquery

Вопрос:

у меня возникли проблемы с добавлением узлов DOM..

это не работает:

 this.loader = $(document.body).append('<div class="loader" style="display:none">loader</div>');

$(this.loader).fadeIn(1000);

но это работает:

 this.loader = DOM.div(document.body);
with(this.loader){
    className = 'loader';
    innerHTML = 'loader';
    style.display = 'none';
}

$(this.loader).fadeIn(1000);

кто-нибудь может сказать мне, что не так?!

но если мне это понравится, div будет добавлен и его видимый

 this.loader = $(document.body).append('<div class="loader">loader</div>');

1. DOM.div(...) ? Для меня это не похоже (просто) на jQuery.

2. это потому, что это мой собственный конструктор DOM 🙂

3. Поскольку ядро jQuery может использовать карту свойств (и целую кучу других приятных вещей, таких как привязки событий), почему бы вам просто не использовать это вместо этого? Что-то вроде этого .

4. Пожалуйста, добавьте сюда ссылку на РЕАЛЬНЫЙ вопрос о title или измените title : jQuery добавить узел DOM.

Ответ №1:

append возвращает объект jQuery для селектора / объекта, который вы передали в него, поэтому ваша первая строка использует объект jQuery document.body , а не оболочку jQuery для вашего нового div . Вы, вероятно, хотите appendTo :

 this.loader = $('<div class="loader" style="display:none">loader</div>').appendTo(document.body);
this.loader.fadeIn(1000);

Или более длинный (но, возможно, более понятный способ):

 this.loader = $('<div class="loader" style="display:none">loader</div>');
this.loader.appendTo(document.body);
this.loader.fadeIn(1000);

Также обратите внимание, что то, что вы получаете обратно, уже является объектом jQuery, поэтому вам не нужно использовать $() для него.

1. Спасибо.. но как вы можете затем в jQuery удалить DOM-узел?

2. @clarkk: Удалить? Ваш вопрос был о создании, не так ли? Но чтобы удалить элемент DOM, вы можете использовать remove функцию jQuery.

Ответ №2:

Я полагаю, что функция append не возвращает значение, о котором вы думаете. Вы должны сделать что-то вроде этого:

  var myDiv = $('<div class="loader" style="display:none">loader</div>');
 $(document.body).append(myDiv);

 myDiv.fadeIn(1000);