Javascript 有没有更干净的方法来解析我的HTML数据？

目前，我通过添加HTML来填充列表框（以及其他内容）。我通过AJAX加载从JSON获取PHP数据，这使我在重新加载内容和减少不必要的页面加载方面具有更大的灵活性

function tracker_list(){
    //get a reference to the select element
    $list = $('#tracker_list');
    //remove entries
    $('#tracker_list').empty();
    //request the JSON data and parse into the select element
    $.ajax({
      url: 'data/JSON_dashboard.php',
      dataType:'JSON',
      success:function(data){ 
        //iterate over the data and append a select option
        $.each(data, function(key, val){
          $list.append('<li class="list-group-item"><div style="background: url(\''+val.profile_photo_path+'\');margin-right:10px;margin-left:7px" class="image-circle-30 pull-left"></div><span class="text-muted"><span class="glyphicon glyphicon-time timestamp pull-right" data-toggle="tooltip" data-placement="bottom" title="'+val.last_activity+'"></span></span><strong><a href="#">'+val.first_name+' '+val.last_name+'</a></strong> was on the <strong><a href="#">'+val.last_page+'</a></strong><br /><span class="text-muted small">'+val.since+'</span></li>'); 
          var total = val.total;
        $("#tracker_num").html("<strong>"+total+"</strong>");   // Replace total users number in head  
        })


      },
      error:function(){
      }
    });
    };

function tracker\u list（）{
//获取对select元素的引用
$list=$（“#跟踪者_列表”）；
//删除条目
$（“#跟踪器列表”）.empty（）；
//请求JSON数据并解析到select元素中
$.ajax({
url:'data/JSON_dashboard.php'，
数据类型：'JSON'，
成功：函数（数据）{
//迭代数据并附加一个选择选项
$。每个（数据、函数（键、值）{
$list.append（“

”+val.since+”
”）在
上；
var total=val.total；
$（“#tracker_num”）.html（“”+total+“”）//替换head中的用户总数
})
},
错误：函数（）{
}
});
};

---

如果我要继续这样做，有没有更好的方法？一旦我在所有HTML上使用新行，脚本就会中断，代码将开始变得非常不可读。

以更干净、更高性能的方式

对每个元素的HTML操作都很昂贵。创建一个数组，推入其中，最后连接所有项目。总计数可以在每次迭代之外

function tracker_list() {
    //get a reference to the select element
    $list = $('#tracker_list');
    //request the JSON data and parse into the select element
    $.ajax({
        url: 'data/JSON_dashboard.php',
        dataType: 'JSON',
        success: function(data) {
            //remove entries
            $list.empty();

            var strArr = [];
            //iterate over the data and append a select option
            $.each(data, function(key, val) {
                strArr.push('<li class="list-group-item"><div style="background: url(\'' + val.profile_photo_path + '\');margin-right:10px;margin-left:7px" class="image-circle-30 pull-left"></div><span class="text-muted"><span class="glyphicon glyphicon-time timestamp pull-right" data-toggle="tooltip" data-placement="bottom" title="' + val.last_activity + '"></span></span><strong><a href="#">' + val.first_name + ' ' + val.last_name + '</a></strong> was on the <strong><a href="#">' + val.last_page + '</a></strong><br /><span class="text-muted small">' + val.since + '</span></li>');
                .append();
            })

            $list.append(strArr.join(""));

            $("#tracker_num").html("<strong>" + data[data.length - 1].total + "</strong>"); // Replace total users number in head  

        },
        error: function() {}
    });
};

function tracker\u list（）{
//获取对select元素的引用
$list=$（“#跟踪者_列表”）；
//请求JSON数据并解析到select元素中
$.ajax({
url:'data/JSON_dashboard.php'，
数据类型：“JSON”，
成功：功能（数据）{
//删除条目
$list.empty（）；
var-strArr=[]；
//迭代数据并附加一个选择选项
$。每个（数据、函数（键、值）{
strArr.push（“

”+val.since+/li>”）在
上；
.append（）；
})
$list.append（strArr.join（“”）；
$（“#tracker_num”）.html（“”+data[data.length-1].total+””；//替换head中的用户总数
},
错误：函数（）{}
});
};

以更清洁、更高效的方式

对每个元素的HTML操作都很昂贵。创建一个数组，推入其中，最后连接所有项目。总计数可以在每次迭代之外

function tracker_list() {
    //get a reference to the select element
    $list = $('#tracker_list');
    //request the JSON data and parse into the select element
    $.ajax({
        url: 'data/JSON_dashboard.php',
        dataType: 'JSON',
        success: function(data) {
            //remove entries
            $list.empty();

            var strArr = [];
            //iterate over the data and append a select option
            $.each(data, function(key, val) {
                strArr.push('<li class="list-group-item"><div style="background: url(\'' + val.profile_photo_path + '\');margin-right:10px;margin-left:7px" class="image-circle-30 pull-left"></div><span class="text-muted"><span class="glyphicon glyphicon-time timestamp pull-right" data-toggle="tooltip" data-placement="bottom" title="' + val.last_activity + '"></span></span><strong><a href="#">' + val.first_name + ' ' + val.last_name + '</a></strong> was on the <strong><a href="#">' + val.last_page + '</a></strong><br /><span class="text-muted small">' + val.since + '</span></li>');
                .append();
            })

            $list.append(strArr.join(""));

            $("#tracker_num").html("<strong>" + data[data.length - 1].total + "</strong>"); // Replace total users number in head  

        },
        error: function() {}
    });
};

function tracker\u list（）{
//获取对select元素的引用
$list=$（“#跟踪者_列表”）；
//请求JSON数据并解析到select元素中
$.ajax({
url:'data/JSON_dashboard.php'，
数据类型：“JSON”，
成功：功能（数据）{
//删除条目
$list.empty（）；
var-strArr=[]；
//迭代数据并附加一个选择选项
$。每个（数据、函数（键、值）{
strArr.push（“

”+val.since+/li>”）在
上；
.append（）；
})
$list.append（strArr.join（“”）；
$（“#tracker_num”）.html（“”+data[data.length-1].total+””；//替换head中的用户总数
},
错误：函数（）{}
});
};

要添加换行符，您可以在另一个变量中构建HTML并将其添加到HTML中：

var html = '<li class="list-group-item"><div style="background';
html = html + 'url(\''+val.profile_photo_path+'\');margin-right';
html = html + '10px;margin-left:7px" class="image-circle-30 pull-left">';
// and so on...
$list.append(html)

var html='
；
//等等。。。
$list.append（html）

或者，您可以像这样使用jQuery构建HTML（仅第一部分）：

var html=$（“
”）
.addClass（'list-group-item'）
.append（$（''）
.css({
背景：“url（'+val.profile_photo_path+）”，
marginRight:10，
边缘左侧：7
})
.addClass（'image-circle-30向左拉'）
)
.append（$（''）
.addClass（“文本静音”）
.append（$（''）
.addClass（'Glypicon Glypicon时间戳向右拉'）
.数据({
切换：“工具提示”，
位置：'底部'
})
.道具({
标题：val.last_活动
})
);
//等等。。。
$list.append（html）

---

但我建议您使用诸如或之类的临时引擎来添加换行符，您可以在另一个变量中构建HTML并将其添加到HTML中：

var html = '<li class="list-group-item"><div style="background';
html = html + 'url(\''+val.profile_photo_path+'\');margin-right';
html = html + '10px;margin-left:7px" class="image-circle-30 pull-left">';
// and so on...
$list.append(html)

var html='
；
//等等。。。
$list.append（html）

或者，您可以像这样使用jQuery构建HTML（仅第一部分）：

var html=$（“
”）
.addClass（'list-group-item'）
.append（$（''）
.css({
背景：“url（'+val.profile_photo_path+）”，
marginRight:10，
边缘左侧：7
})
.addClass（'image-circle-30向左拉'）
)
.append（$（''）
.addClass（“文本静音”）
.append（$（''）
.addClass（'Glypicon Glypicon时间戳向右拉'）
.数据({
切换：“工具提示”，
位置：'底部'
})
.道具({
标题：val.last_活动
})
);
//等等。。。
$list.append（html）

但是我建议你使用一个临时引擎，比如or

有没有更干净的方法来解析我的HTML数据

是的，这种更简洁的方法称为HTML模板化，例如，使用。首先，将所需的HTML部分写入一个特殊的脚本标记中，并为要显示的各个值添加占位符

Total:
{{{#每个。}

在


{{自}}

{{/每个}}

然后，您可以在JavaScript代码和