Javascript - better way to write html into "append" function -

say have following code:

var rightpane = $("#right");     // draw right pane     rightpane.html('<h2>' + task.task + '<h2> <hr />' +                      'data1: <input type="text" id="data1" value="' + task.data1 + '" /> <br />' +                       'data2: <input type="text" id="data2" value="' + task.data2 + '" /> <br />' +                       'data1: <input type="text" id="data3" value="' + task.data3 + '" /> <br />' +                       '<input type="button" id="subupdated" value="save">'); 

i there way write html code simple html code , , without qoutes , plus signs?

in current version of javascript, can escaping newlines @ ends of lines, bit better note leading whitespace included in string, , still have use concatenation swap in values:

var rightpane = $("#right"); // draw right pane rightpane.html('<h2>' + task.task + '<h2> <hr />\ data1: <input type="text" id="data1" value="' + task.data1 + '" /> <br />\ data2: <input type="text" id="data2" value="' + task.data2 + '" /> <br />\ data1: <input type="text" id="data3" value="' + task.data3 + '" /> <br />\ <input type="button" id="subupdated" value="save">'); 

in next version of javascript, "es6", we'll have template strings can multi-line , let swap in text using ${...}:

// requires es6 var rightpane = $("#right"); // draw right pane rightpane.html(`     <h2>${task.task}<h2> <hr />     data1: <input type="text" id="data1" value="${task.data1}" /> <br />      data2: <input type="text" id="data2" value="${task.data2}" /> <br />      data1: <input type="text" id="data3" value="${task.data3}" /> <br />      <input type="button" id="subupdated" value="save">     `); 

(again leading whitespace included in string.)

to before es6, can use of several templating libraries (handlebars, mustache, rivetsjs).

for simple version, use the function wrote question.