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

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?

As mentioned above look into `underscore.js` or `handlebars` — aphextwix, Jul 15 '15 at 07:46

score 1 · Accepted Answer · edited May 23 '17 at 10:27

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 for another question.

@Billie: AngularJS is an application framework. One very small part of it is templating. — T.J. Crowder, Jul 15 '15 at 07:49

score 1 · Answer 2 · answered Jul 15 '15 at 08:03

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:

$(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);
    }
  });
});

<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>

score 0 · Answer 3 · answered Jul 15 '15 at 07:50

0

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.

answered Jul 15 '15 at 07:50

nman

57
1
8

score 0 · Answer 4 · edited May 23 '17 at 11:59

0

You can try to do something like this: Format a string using placeholders and an object of substitutions?

but as Hacketo suggests it would be better to learn to use templates. Take for instance look at underscore.js (http://underscorejs.org/#template)

edited May 23 '17 at 11:59

Community

1
1

answered Jul 15 '15 at 07:52

TeeeJay

11
1

score 0 · Answer 5 · answered Jul 15 '15 at 07:56

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.

score 0 · Answer 6 · answered Jul 15 '15 at 08:01

You could take a look at a JavaScript templating engine. Such as Handlebars, Mustache etc. You can see some of the popular ones here: 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">

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

6 Answers6