如何实现遍历页面中的渲染元素？

本文共计205个文字，预计阅读时间需要1分钟。

不建议的做法（多次渲染，消耗内存）：javascriptvar browserList=[Internet Explorer, Mozilla Firefox, Safari, Chrome, Opera];$.each(browserList, function(index, value) { $('ul').append('' + value + '');});

不建议的做法（多次渲染，消耗内存）

var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"]; $.each(browserList, function (index,value) { $('ul').append($('

').text(value)); })

好的方法NO1（创建碎片元素）

var frag = document.createDocumentFragment(); var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"]; $.each(browserList, function (index, value) { $(frag).append("

"+value+"

"); }) $('ul').append($(frag)); 好的作法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').append($(frag)); 好的做法NO3（字符串拼接）

var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"]; var myHTML = ''; $.each(browserList, function (index, value) { myHTML += '

' + value + '

'; }) $('ul').html(myHTML);