此问题是在看API时产生的，代码如下：

var ul = document.getElementsByTagName("ul")[0]; // assuming it exists var docfrag = document.createDocumentFragment(); var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"]; browserList.forEach(function(e) { var li = document.createElement("li"); li.textContent = e; docfrag.appendChild(li); }); ul.appendChild(docfrag); // a list with well-known web browsers

若不使用createDocumentFragment，可以如下实现，但是问题是在数组项有成千上万个时，在循环中每次一个去添加DOM元素，给性能带来压力，最好的做法是使用createDocumentFragment先创建文档片段，然后在循环外一次性批量添加完成。

var ul = document.getElementsByTagName("ul")[0]; var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"]; browserList.forEach(function (e) { var li = document.createElement("li"); li.textContent = e; ul.appendChild(li); });

在使用jQuery时，即使append等方法内部中是通过createDocumentFragment来实现（@
长颈鹿 有说到），也最好是在循环外一次性向页面批量添加DOM元素：

//不建议的做法 var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"]; $.each(browserList, function (index,value) { $('
').text(value).appendTo($('ul').eq(0)); }) //好的做法NO1 var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"]; var myHTML = ''; $.each(browserList, function (index, value) { myHTML += '
' + value + '
'; }) $('ul').eq(0).html(myHTML); //好的作法NO2 var frag = document.createDocumentFragment(); var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"]; $.each(browserList, function (index, value) { var li = document.createElement("li"); li.textContent = value; frag.appendChild(li); }) $('ul').eq(0).append($(frag));

使用Jquery时通常是通过拼接HTML字符串实现的，Jquery会对创建和添加过程进行优化

var tag = $("
") tag.append($("
")); ... $(".parent").append(tag);

这样写不可以吗？