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

虽然它有效,但我不确定这是否是完成此任务的正确方法.此外,是否可以将元素添加到父元素,并淡化子元素？使用的一个例子很棒!

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用我们的数据对象调用函数,将得到的标记附加到我们的容器(或主体),然后将其淡入.

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

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

结果是更清晰,更清晰,代码更有意义,易于维护.

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

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,在最糟糕的情况下,您刚刚在应用中留下了跨站点脚本安全漏洞.

此外,没有encodeURIComponent编码safeUrl(除非你已经这样做了).为了可靠性,还需要做.safeUrl由于href属性上缺少引号,还有许多字符可能会中断.

更好:使用该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');