jQuery – 添加子元素的正确方法？

这是我jQuery的第一天，所以忍受我。目前，我通过执行以下操作将元素添加到我的父容器中：

var uploadedContainer =$('#uploadedimages');
var uploadedItem = '<div><span>'+file.name
                 + '</span><span><a class="mylink" href=remove.aspx?img='
                 + safeUrl+'>Remove</a></span></div>';
uploadedContainer.append(uploadedItem);

虽然它有效，但我不知道这是否是完成此任务的正确方法。此外，是否可以将元素添加到父项，并将子元素淡入？一个使用的例子将是很棒的！

解决方法

如果你要一遍又一遍地添加类似的元素，我会避免在代码中使用冗长的字符串。它们是一种维护的难点，并创建难以阅读的代码。我反而鼓励你使用像 Handlebars这样的模板工具：

<script type="text/x-handlebars-template" id="tmpl">
    <div>
        <span>{{filename}}</span>
        <span><a href="remove.aspx?image={{safeUrl}}">Remove</a></span>
    </div>
</script>

现在我们从上面构建一个编译的模板：

var template = Handlebars.compile( $("#tmpl").html() );

现在剩下的就是使用我们的数据对象调用模板函数，将生成的标记附加到我们的容器(或体)上，并将其淡入淡出。

var data = { 
    filename: "foo.png",safeUrl: encodeURIComponent("foo image")
};

$("body").append(template(data)).fadeIn();

结果是更清洁，更清晰，代码更有意义，易于维护。

在线演示：http://plnkr.co/edit/7JVa2w6zOXdITlSfOOAv?p=preview

原文地址：https://www.jb51.cc/jquery/182429.html