Question: say I have the following code:

```
var rightPane = $("#right");
    // Draw the 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 any way to write the HTML code like a simple HTML code , and without the qoutes and the plus signs?

Answer: 
In the current version of JavaScript, you can do this by escaping the newlines at the ends of lines, which is a *bit* better but note that leading whitespace will be included in the string, and you still have to use concatenation to swap in your values:

```
var rightPane = $("#right");
// Draw the 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 the next version of JavaScript, "ES6", we'll have *template strings* which can be multi-line and which let you easily swap in text using `${...}`:

```
// REQUIRES ES6
var rightPane = $("#right");
// Draw the 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 is included in the string.)

To do that before ES6, you can use any of several templating libraries (Handlebars, Mustache, RivetsJS).

For a really simple version, you could use [the function I wrote](https://stackoverflow.com/a/31368057/157247) for another question.
You could take a look at a JavaScript templating engine. Such as Handlebars, Mustache etc. You can see some of the popular ones [here](http://www.creativebloq.com/web-design/templating-engines-9134396): You can *kind* of view these as user controls similar to what you get in ASP.NET

This is an example of Handlebars for your code:

```
<h2>{{task}}<h2> <hr />
data1: <input type="text" id="data1" value="{{data1}}" /> <br /> 
data2: <input type="text" id="data2" value="{{data2}}" /> <br /> 
data1: <input type="text" id="data3" value="{{data3}}" /> <br /> 
<input type="button" id="subUpdated" value="Save">

```