jQuery -- 如何正确添加子元素？

Question

这是我的第一天学习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);

虽然这个方法可行，但我不确定这是否是完成此任务的正确方式。而且，能否将该元素添加到父元素中，并淡入子元素呢？提供一个用例示例会很棒！

- George Johnston

Answer 1

如果您将要重复添加类似的元素，我建议避免在代码中使用冗长的字符串。它们很难维护，且产生难以阅读的代码。相反，我建议使用类似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() );

现在唯一剩下的就是使用我们的数据对象来调用 template 函数，将生成的标记附加到我们的容器（或body）中并进行淡入。

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

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

结果更加简洁易读，代码将变得有意义且易于维护。

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

- Sampson

Answer 2

var uploadedItem = '<div><span>'+file.name+'</span><span><a class="mylink" href=remove.aspx?img='+safeUrl+'>Remove</a></span></div>';

您应该避免像这样将HTML和字符串混合在一起。如果file.name或safeUrl中有<或&字符，那么在最好的情况下，您会生成无效的HTML，在最坏的情况下，您刚刚留下了一个跨站点脚本安全漏洞。

此外，safeUrl上没有encodeURIComponent编码（除非您已经这样做了）。为了可靠性，也需要这样做。由于href属性缺少引号，还有许多其他可能破坏safeUrl的字符。

更好的方法是：使用text()方法设置元素的文本内容，并使用attr()将属性设置为值。然后您就不需要担心HTML转义。例如：

var div= $('<div><span></span><span><a class="mylink">Remove</a></div>');
div.find('span').eq(0).text(file.name);
div.find('span').eq(1).attr('href', 'remove.aspx?img='+encodeURIComponent(url));
div.appendTo('#uploadedimages');

- bobince

Answer 3

那段代码应该可以使用。您可以添加以下代码来淡入某些内容：

  $('#uploadedimages').fadeIn('slow', function() {
    // Animation complete
  });

为使此功能正常工作，您需要将上传的图像的可见性设置为隐藏。

JQuery文档非常好。建议访问JQuery网站。

这是一个关于淡入某物的链接。

- mdm20