jQuery -- 添加子元素的正确方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2196036/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery -- The right way to add a child element?
提问by George Johnston
This is my first day of jQuery, so bear with me. Currently, I am adding an element to my parent container by doing the following:
这是我使用 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);
While it works, I'm not sure if that's the right way to accomplish this task. Also, is it possible to add the element to the parent, and fade the child element in? An example of usage would be great!
虽然它有效，但我不确定这是否是完成此任务的正确方法。另外，是否可以将元素添加到父元素，并淡入子元素？一个使用示例会很棒！
回答by Sampson
If you're going to be adding similar elements over and over, I would avoid using lengthy strings in your code. They are a pain to maintain, and create difficult-to-read code. I would instead encourage you to use a templating tool like Handlebars:
如果您要一遍又一遍地添加类似的元素，我会避免在您的代码中使用冗长的字符串。它们维护起来很痛苦，并且会创建难以阅读的代码。相反，我鼓励您使用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>
Now we build a compiled template from the above:
现在我们从上面构建一个编译模板：
var template = Handlebars.compile( $("#tmpl").html() );
All that is left now is to call the templatefunction with our data object, append the resulting markup to our container (or body), and fade it in.
现在剩下的就是template用我们的数据对象调用函数，将结果标记附加到我们的容器（或主体），然后淡入。
var data = {
filename: "foo.png",
safeUrl: encodeURIComponent("foo image")
};
$("body").append(template(data)).fadeIn();
The result is cleaner, more legible, code that will make sense and be easy to maintain.
结果是更清晰、更清晰、有意义且易于维护的代码。
Demo Online: http://plnkr.co/edit/7JVa2w6zOXdITlSfOOAv?p=preview
回答by bobince
var uploadedItem = '<div><span>'+file.name+'</span><span><a class="mylink" href=remove.aspx?img='+safeUrl+'>Remove</a></span></div>';
You should avoid slinging HTML together with strings like this. What if file.nameor safeUrlhas a <or &character in? In the best case you're generating invalid HTML, in the worst case you've just left a cross-site-scripting security hole in your app.
您应该避免将 HTML 与这样的字符串混在一起。如果file.name或 中safeUrl有<或&字符怎么办？在最好的情况下，您生成了无效的 HTML，在最坏的情况下，您只是在应用程序中留下了跨站点脚本安全漏洞。
Also, there is no encodeURIComponentencoding on safeUrl(unless you've done that already). That would need to be done too for reliability. There are also many more characters that might break with safeUrldue to the missing quotes on the href attribute.
此外，没有encodeURIComponent编码safeUrl（除非您已经这样做了）。为了可靠性，也需要这样做。safeUrl由于 href 属性上缺少引号，还有更多的字符可能会中断。
Better: use the text()method to set the text content of an element, and attr()to set an attribute to a value. Then you do not need to worry about HTML-escaping. eg.:
更好：使用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');
回答by mdm20
That code should work. You can add this code to fade something in:
该代码应该可以工作。您可以添加此代码以淡入淡出某些内容：
$('#uploadedimages').fadeIn('slow', function() {
// Animation complete
});
You'll need to set the visibility of uploadedimages to hidden for this to work.
您需要将上传图像的可见性设置为隐藏才能使其工作。
The JQuery documentation is very good. I would suggest visiting the JQuery site.
JQuery 文档非常好。我建议访问JQuery 站点。
Here is a linkfor you regarding fading something in.
这是一个关于淡入淡出的链接。
