当前位置 : 主页 > 网络编程 > JavaScript >

遍历渲染元素

来源:互联网 收集:自由互联 发布时间:2021-06-28
不建议的做法(多次渲染,消耗内存) var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"];$.each(browserList, function (index,value) { $('ul').append($(' ').text(value));}) 好的方法NO1(创
不建议的做法(多次渲染,消耗内存)
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);
    上一篇:promises observables
    下一篇:JavaScriptBridge
    网友评论