Question

目前，我正在使用以下代码动态地将HTML插入DOM：

var td1 = "<tr class='xls-people-"+data.people[i].tdid+"'><td><div class='parse_name Photo-text-"+data.people[i].tdid+"'><img src='https://graph.facebook.com/3/picture'/></div></td>";
var td2 = "<td><div class='parse_name ID-text-"+data.people[i].tdid+"'>"+data.people[i].id+"</div><div class='parse_name1'><div class='switch demo3'><input type='checkbox' id='counters' class='ID-"+data.people[i].tdid+"'><label><i></i></label></div></div></td>";
var td3 = "<td><div class='parse_name Name-text-"+data.people[i].tdid+"'>"+data.people[i].firstname+"</div><div class='parse_name1'><div class='switch demo3'><input type='checkbox' id='counters' class='Name-"+data.people[i].tdid+"'><label><i></i></label></div></div></td>";
var td4 = "<td><div class='parse_name Surname-text-"+data.people[i].tdid+"'>"+data.people[i].lastname+"</div><div class='parse_name1'><div class='switch demo3'><input type='checkbox' id='counters' class='Surname-"+data.people[i].tdid+"'><label><i></i></label></div></div></td>";
var td5 = "<td><div class='parse_name Nickname-text-"+data.people[i].tdid+"'>"+data.people[i].nickname+"</div><div class='parse_name1'><div class='switch demo3'><input type='checkbox' id='counters' class='Nickname-"+data.people[i].tdid+"'><label><i></i></label></div></div></td>";
var td6 = "<td><div class='parse_name Phone-text-"+data.people[i].tdid+"'>"+data.people[i].phone+"</div><div class='parse_name1'><div class='switch demo3'><input type='checkbox' id='counters' class='Phone-"+data.people[i].tdid+"'><label><i></i></label></div></div></td>";
var td7 = "<td><div class='parse_name City-text-"+data.people[i].tdid+"'>"+data.people[i].city+"</div><div class='parse_name1'><div class='switch demo3'><input type='checkbox' id='counters' class='City-"+data.people[i].tdid+"'><label><i></i></label></div></div></td>";
var td8 = "<td><div class='parse_name CountFriends-text-"+data.people[i].tdid+"'>"+data.people[i].countfriends+"</div><div class='parse_name1'><div class='switch demo3'><input type='checkbox' id='counters' class='CountFriends-"+data.people[i].tdid+"'><label><i></i></label></div></div></td>";
var td9 = "<td><div class='parse_name Mail-text-"+data.people[i].tdid+"'>"+data.people[i].mail+"</div><div class='parse_name1'><div class='switch demo3'><input type='checkbox' id='counters' class='Mail-"+data.people[i].tdid+"'><label><i></i></label></div></div></td>";
var td10 = "<td><div class='parse_name Avocation-text-"+data.people[i].tdid+"'>"+data.people[i].avocation+"</div><div class='parse_name1'><div class='switch demo3'><input type='checkbox' id='counters' class='Avocation-"+data.people[i].tdid+"'><label><i></i></label></div></div></td>";
var td11 = "<td><div class='parse_name Status-text-"+data.people[i].tdid+"'>Wait to parse</div></td></tr>";
$(".peoples_data tbody").append(td1+td2+td3+td4+td5+td6+td7+td8+td9+td10+td11).hide().show('slow');

有更简单/更好的方法吗？

Answer 1

只需构建一个字符串？

var html = "";
    html += "<html string>";
    html += "<html string>";

$(".peoples_data tbody").append(html);

如果单元格和内容文本之间的唯一区别是节省一些麻烦和：

function getCell(classPrefix, tdid, blah)
{
  return "<td><div class='parse_name " + classPrefix+ "-text-"+ tdid +"'>"+ .......
}

和

var html = "";
    html += getCell("CountFriends", data.people[i].tdid, ....);

Answer 2

我希望你从这个例子中得到一个想法：

var tr = $("<tr>", { /*attributes*/ });

var td = $("<td>", { /*attributes*/ });

var div = $("<div>", { /*attributes*/ });

td.append(div);
tr.append(td);

$(".peoples_data tbody").append(tr);

Answer 3

为什么不使用Array来实现任务，最简单的方法！

    data = ['a', 'b', 'c', 'e', 'f', 'f'];
    names = ['ID-text-', 'Name-text-', 'Surname-text-', 'Nickname-text', 'Phone-text-', 'City-text-'];
    html = "<tr>";
    for (i = 0; i < names.length - 1; i++) {
        html += "<td class=parse_name" + names[i] + ">" + data[i] + "<td>";
    }
    $('div').append(html);

Live example here

Answer 4

试试这个

$(".peoples_data tbody").append(" <tr></tr> \
                                  <td></td> \
                                  <td></td> ");

使用jQuery插入HTML的最简单方法

4 个答案: