Simplest way to insert HTML with jQuery

Question

Currently, I am inserting HTML into the DOM dynamically using this code:

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');

Is there a simpler/better way to do it?

Most HTML looks identical, you can replace that with a var in a loop. Also I would't use the class attribute for tid, but the HTML5 data attribute: 'data-tid = "' + tid + '"' — Jonathan
– Jonathan, Commented Jul 23, 2014 at 12:07

Alex K. · Accepted Answer · 2014-07-23 12:09:53Z

3

Just build a string?

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

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

If the only difference between the cells is the class and content text save yourself some hassle and:

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

And

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

edited Jul 23, 2014 at 12:09

answered Jul 23, 2014 at 12:04

Alex K.

177k32 gold badges275 silver badges298 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kyle Emmanuel · Accepted Answer · 2014-07-23 12:06:34Z

2

I hope you get an idea from this example:

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

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

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

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

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

answered Jul 23, 2014 at 12:06

Kyle Emmanuel

2,2211 gold badge17 silver badges23 bronze badges

Comments

Suraj Rawat · Accepted Answer · 2014-07-23 12:18:00Z

2

Why don't you use Array to achieve the task , easiest way possible !

    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

answered Jul 23, 2014 at 12:18

Suraj Rawat

3,76325 silver badges33 bronze badges

Comments

Lugarini · Accepted Answer · 2014-07-23 12:09:23Z

1

Try this

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

answered Jul 23, 2014 at 12:09

Lugarini

8005 gold badges12 silver badges32 bronze badges

Collectives™ on Stack Overflow

Simplest way to insert HTML with jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related