jQuery: Създаване на нов DOM елемент и показването му

Както подсказва заглавието, искам да създам нов dom елемент (HTML се генерира и извлича чрез AJAX). Донякъде го накарах да работи, но изглежда скрит и когато се опитам да избледнявам, се поврежда!

   function AddContent(Content) {
        div = document.createElement(Content)
        div.appendTo($("#contentAreas"));
        //    $(div).fadeIn("slow");
        }

По принцип вмъква елемента в правилната позиция, но не го показва. Когато се опитвам да го избледнявам, не успява. Без грешки.

Някакви идеи?


person Damien    schedule 30.06.2009    source източник
comment
Бихте ли били по-описателни? Как се счупва? Как изглежда съдържанието? Как изглежда #contentAreas?   -  person Andrew Hare    schedule 30.06.2009
comment
Освен това, какво се случва, ако го направите: $(#contentAreas).append(div);   -  person Tony Miller    schedule 30.06.2009


Отговори (5)


Div трябва да е jQuery, за да работи appendTo. Опитайте тази:

 function AddContent( content ) {
     $(content).appendTo("#contentAreas").fadeIn("slow");
 }
person tvanfosson    schedule 30.06.2009
comment
Деймиън, имайте предвид, че appendTo взема селектор, така че можете просто да направите .appendTo(#contentAreas). Спестява създаването на друг jquery обект без причина - person redsquare; 30.06.2009
comment
@redsquare - благодаря, че го посочихте. Актуализирах, тъй като прави кода по-чист. Вътрешно обаче мисля, че първото нещо, което appendTo прави, е jQuery(селектор). - person tvanfosson; 30.06.2009
comment
@tvanfosson -- наистина помага за спестяване на няколко натискания на клавиши!! - person redsquare; 30.06.2009

Трябва да е $(div).appendTo(...). Или може би можете да промените начина, по който div се създава на div = $(Content).

person John Kugelman    schedule 30.06.2009

Нямате нужда от createElement, конструкторът jQuery може да приеме html като параметър (ако приемем, че съдържанието е html низ):

function AddContent(content) {
   var div = $(content);
   div.appendTo($("#contentAreas"));
   $(div).fadeIn("slow");
}
person Alistair Evans    schedule 30.06.2009

Какво ще кажете за това:

   function AddContent(Content) {
        div = $('<div>' + Content + '</div>');           
        div.appendTo($("#contentAreas")).fadeIn("slow");
   }
person karim79    schedule 30.06.2009

AppendTo приема селектор, така че не е необходимо да бъде jquery обект, тъй като всички други примери по-горе го имат.

function AddContent( content ) {
     $(content).appendTo("#contentAreas").fadeIn("slow");
 }
person redsquare    schedule 30.06.2009