reserve indented format using HTML in javascript

Question

without using any templating engine I often write something like this

success(data) {
  var html = '';
  if (data) {
    $.each(data.result, function() {
      html += '<button type="button" class="btn btn-navbar" data toggle="collapse" data-target=".nav-collapse">'
      html += '<span class="icon-bar"></span>'
      html += '<span class="icon-bar"></span>'
      html += '<span class="icon-bar"></span>'
      html += '</button>'
    });
    $('something').append(html);

  }
}

if the html I want is massive it's hard to read, any way to keep the indentation in my case above?

I agree with @nnnnnn. Whenever I dynamically build html, I often append "\n" and "\t" to front of my strings, which seems to work nicely when rendered. It's a hell of an eyesore on the backend though. — tblznbits
– tblznbits, Commented Dec 23, 2015 at 4:57
are you "reading" the source in a dev tool? Chrome for example formats the html by default, thus negating the need to manually indent. — Mario Tacke
– Mario Tacke, Commented Dec 23, 2015 at 4:57

Yeldar Kurmangaliyev · Accepted Answer · 2015-12-23 04:52:47Z

1

You can use backticks to define multi-line strings:

var buttonTemplate = `<button type="button" class="btn btn-navbar" data toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>`;

if (data) {
  $.each(data.result, function() {
    $(buttonTemplate).appendTo('#something');
  });
}

Here is the working demo.

Note that it is a part of ECMAScript 6 standard and can be not working in some browsers:
ES6 Template Strings compatibility table

edited Dec 23, 2015 at 4:52

answered Dec 23, 2015 at 4:50

Yeldar Kurmangaliyev

34.3k13 gold badges64 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

brk · Accepted Answer · 2015-12-23 05:12:05Z

1

You can create and store template in an array which is easirer to handle.Also you can store multiple template and use it acordingly

Templates = {};
Templates.temp = [
    `<button type="button" class="btn btn-navbar" data toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>`
].join("\n");

if (data) {
  $.each(data.result, function() {
   $('#something').append($(Templates.temp));  // into jQuery object
  });
}

NOTE: " " in join("\n") which is different from single quotes join('\n')

answered Dec 23, 2015 at 5:12

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

yunnysunny · Accepted Answer · 2015-12-23 05:17:19Z

0

In your html in save your template in a script tag with type of text/template(Any type ,which type not equals to text/javascript,will be ignored by the browser).

<script type="text/template" id="btnTpl">
<button type="button" class="btn btn-navbar" data toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
</script>

And then you can use it in your javascript code:

var buttonTpl = $('#btnTpl').html();
if (data) {
  $.each(data.result, function() {
    $(buttonTpl).appendTo('#something');
  });
}

answered Dec 23, 2015 at 5:17

yunnysunny

3032 silver badges17 bronze badges

Collectives™ on Stack Overflow

reserve indented format using HTML in javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related