Generate html code with javascript [duplicate]

Question

I need to generate 185 lines of html on a web page when the user clicks on a button and I want to declare the html code as a multiple lines on a variable but I 've problems with the html code on a variable, I tried several ways researching on the web but I couldn't achieve it.

For example:

 <script type="javascript">

    //it doesn't work
    var html = " <li> <!-- 185 lines of html -->  </li>";

 </script>

Using Heredoc (I thought heredoc notation doesn't work on Javascript -???-) notation seems that works but the javascript contained on the html shows an error.

I really appreciate any help.

You refer to multiple lines and heredoc, but your code example shows neither. — j08691
– j08691, Commented Jan 13, 2016 at 18:34
I can't use the variable because the IDE (PHPStorm BTW) shows errors, I'm trying concatenating strings and it works in fact, but I think that is a really dirty way. — MadDev
– MadDev, Commented Jan 13, 2016 at 18:45
If you're building HTML, it may be more efficient (at least easier to read) to build the elements programmatically. Here is an answer I favorited and always refer back to. — krillgar
– krillgar, Commented Jan 13, 2016 at 18:52

Marox Tn · Accepted Answer · 2016-01-13 18:46:12Z

0

You can do something like this:

 document.getElementById('button').onclick = function(){

      var eleContainer = document.getElementById('container'), //The parent of the of the elements
          html = '',    //Will be filled with html lines
          repeats = 128; //You can change it as much as you want

      for(var i=0; i<repeats; i++){
          html += '<li></li>';
      }

      eleContainer.innerHTML = html;

 }

edited Jan 13, 2016 at 18:46

answered Jan 13, 2016 at 18:41

Marox Tn

1429 bronze badges

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

5 Comments

MadDev Over a year ago

I 've a similar code... my problem is that I don't want to concatenate 185 lines on the 'html' variable (using your code as example ;) ) using quotes and + ... I think that is a dirty way... I want (if exist) a way as heredoc notation.

Marox Tn Over a year ago

As I read from other forums The heredoc notation does not exist on JavaScript

mc01 Over a year ago

Figuring out how to structure html seems to be the problem. BTW your code just sticks an empty <li> tag on the end of html, it doesn't wrap it in one. When they later want to add an arbitrary number of new lines of HTML or change the content, they're supposed to count the exact # of lines and edit JS? ... Something to consider.

Marox Tn Over a year ago

You may find this useful stackoverflow.com/a/14416259/4146647

Marox Tn Over a year ago

You mean something like this ? jsfiddle.net/s1kpjcbg/1

Collectives™ on Stack Overflow

Generate html code with javascript [duplicate]

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related