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>
```
Not currently, other than templates as others have mentioned. What you could do, however, is to include the initial HTML code in your main document, and then set the values with `rightPane.val(task.data1);`, etc.