传统上我一直在向页面添加HTML内容,如下所示:
var text='Some text';
var num=0;
$('#div').append('<div id="a'+num+'">'+text+'</div>');
但是最近我在其他人的代码中注意到了很多这种方法:
var text='Some text';
var num=0;
var newElement=$('<div></div>').text(text).prop('id','a'+num);
$('#div').append(newElement);
有人可以向我解释第二种方法的优点,以及我是否应该转向这种方法,或者我是否应该像往常一样继续追加。
答案 0 :(得分:1)
如果您不需要更改要添加的DOM元素,请使用第一种方法。
第二种方法更昂贵,因为您正在创建一个jQuery选择器。这仅在您想要使用您正在创建的元素进行动画处理,淡入淡出或进一步操作时才有用,并且需要参考它。
答案 1 :(得分:1)
第一个比第二个快,主要是因为它只是简化一些字符串并直接附加html
在第二个中,你正在执行.text()
和.prop()
,这比字符串连接有点过分了。
jsperf test也证明了第一种方法是可行的方法。虽然第二个更具可读性,但第一个更快。你选择你想要的东西。
在我的笔记本电脑中,第二种方法比第一种方法慢19%。