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: 
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>
```
One alternative way of approaching this would be : 

```
var $h2     = $("<h2>", {text : task.task});
var $data1  = $("<input>", {type : 'text', value : task.data1});
var $data2  = $("<input>", {type : 'text', value : task.data2});
var $data3  = $("<input>", {type : 'text', value : task.data3});
var $button = $("<input>", {type : 'button', value : 'Save'});

rightPane.append($h2, $data1, $data2, $data3, $button);

```

This might be a little easier to follow when scanning over the code, rather than shifting through the `.html()` function.