在Div上插入Div

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