How to add huge html in .append() function?

Question

The problem with .append is that I must write all in one line like so:

$('#addr' + (i - 1)).append("<td>" + i + "</td><td><input id='riferimento_" + i + "' name='riferimento_" + i + "' type='text' placeholder='RIFERIMENTO' class='form-control riferimento'  /></td><td><input id='host_" + i + "' name='host_" + i + "' type='text' placeholder='HOST' class='form-control host'  /></td><td><input id='user_" + i + "' name='user_" + i + "' type='text' placeholder='USER' class='form-control user'  /></td><td><div class='opzioni' id='opzione" + i + "'>  <p id='infotime_" + i + "' class='pull-left'><p>  <a href='#' id='" + i + "' class='btn btn-danger  btn-circle  pull-right btn_delete_row'> <span class='glyphicon glyphicon-trash'></a> <a style='margin-right: 8px;' href='#' data-popup-open='popup_" + i + "' class='btn btn-info btn-circle pull-right more_info '><span class='glyphicon glyphicon-info-sign'></span></a> <a hidden style='margin-right: 8px;' href='#' key='" + i + "' id='update_row_db_" + i + "' class='btn btn-primary btn-circle pull-right update_row_db '><span class='glyphicon glyphicon-pencil'></span></a>  <a hidden style='margin-right: 8px;' href='#' key='" + i + "' id='add_row_db_" + i + "' class='btn btn-success btn-circle pull-right add_row_db '><span class='glyphicon  glyphicon-save'></span></a> </div></td>");

how can i use breaklines and format the html like this:

$('#addr'+(i-1)).append("
    <div>
        <p></p>
    </div>
");

I'd like to have a code more readable for further changes. Maybe I'm looking at the problem in the wrong way, do you know another way?

Generally, script tags and files are for javascript, and .html, .php files etc are for markup — adeneo, Oct 17 '16 at 13:18
If you're needing to append that much HTML dynamically you should look in to using a templating library — Rory McCrossan, Oct 17 '16 at 13:36

score 1 · Accepted Answer · answered Oct 17 '16 at 13:27

You can do something like :-

var htmlToAppend;
htmlToAppend="<td>"+ i +"</td>";
htmlToAppend=htmlToAppend+"<td><input id='riferimento_"+i+"' name='riferimento_"+i+"' type='text' placeholder='RIFERIMENTO' class='form-control riferimento'/>";
htmlToAppend=htmlToAppend+"</td>";
htmlToAppend=htmlToAppend+"<td><input id='host_"+i+"' name='host_"+i+"' type='text' placeholder='HOST' class='form-control host'  /></td>";
htmlToAppend=htmlToAppend+ "<td><input id='user_"+i+"' name='user_"+i+"' type='text' placeholder='USER' class='form-control user'  /></td>

";

and finally

$('#addr'+(i-1)).append(htmlToAppend);

to make it more readable

I agree with your answer but one small modification I would suggest: Instead of `htmlToAppend=htmlToAppend+ more html here'`, a better way would be: `htmlToAppend += 'more html here'` — anima_incognita, Oct 17 '16 at 13:29

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

Google's JavaScript style guide recommends to use string concatenation instead of escaping newlines:

var myString = '<div> ' +
'<p> Hello World</p>' +
'<p> Use this style </p>' +
'</div>';

Source: https://stackoverflow.com/a/6247331/3704861

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 17 '16 at 13:30

gwthm.in

638
9
24

How to add huge html in .append() function?

2 Answers2