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 create your own super-simple 'template engine'. 

* Write your template in the markup of your page as you would a usual element.
* Give the template container element an attribute to denote its role as a template, for example a data attribute of `data-template`.
* Clone and detach all `data-template` elements when the DOM is ready.
* On some event, insert your values as you like, then re-insert the compiled template into the page.

For example:

```js
$(document).ready(function() {
  var template = $('[data-template]').detach().clone();  
  var values = { foo: 'bar', yipee: 'yahoo' };

  $('button').click(function() {
    for(var prop in values) {
      template.find('[data-value="' + prop + '"]').html(values[prop]);
      $('#container').append(template);
    }
  });
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Insert</button>

<div id="container"></div>

<div data-template>
  <div data-value="foo"></div>
  <div>
    <div data-value="yipee"></div>
  </div>
</div>
```