Вставка Div над другим Div's

Question

В настоящее время у меня есть форма, которая отправляется через ajax, и когда она будет успешной, она помещает информацию в начало списка.

Мой текущий макет

<div id="projects"> 
    <div class="project"> 
     .... 
    </div> 
    <div class="project"> 
     .... 
    </div> 
    .... 
</div> 

И я вводные по

var project = $('<div class="project">' + 
         '<div class="name">'+data.title+'</div>' + 
         '<div class="desc">'+data.desc+'</div>' + 
       '</div><hr />').fadeIn(1000, function() { } 
            ); 
$('.project:first-child').before(project); 
$('.project:first-child').highlightFade({color:'#e3e373',speed:4000,iterator:'exponential'}); 

Это прекрасно работает, как только есть что-то в списке, но когда нет ничего, что терпит неудачу (потому что он может Найти класс с проектом.

Как я могу улучшить это, чтобы он работал, даже если в списке нет проектов?

Answer 1

Я бы сделал это несколько иначе.

Во-первых, я бы не стал строить разметку таким образом, по крайней мере, по частям. Если data.title содержит, скажем, <, то он не будет экранирован должным образом. Для этого лучше использовать text().

Во-вторых, быстрее создавать элементы DOM, а не вставлять сырую разметку. В этом случае $("<div>") эквивалентен $(document.createElement("div")).

В-третьих, для размещения содержимого необходимо использовать prependTo. Тогда у вас нет проблем.

Итак:

$("<div>").addClass("project") 
    .appendChild($("<div>").addClass("name").text(data.title)) 
    .appendChild($("<div>").addClass("desc").text(data.desc)); 
    .hide().prependTo("#projects").fadeIn(1000);