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