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

将Div插入其他Div之上

1 个答案: