Repeat HTML code with plain Javascript

Question

Is there a way to have html/javascript code to repeat html-code? Basically, I need to use plain javascript and at the same time I need to build html elements in a for loop. So in html I can have:

<div>col1</div>
<div>col2></div>
<div>col3</div>

The problem is that there can be several sets of the above html code. What I'm doing now is to write html inside the javascript code. I would like to make it cleaner and have the html structure where it belongs, which is in the html-page.

Well I now that it would solve the problem. Thing is that Im in a project where I need to use plain javascript. — oderfla
– oderfla, Commented Jul 6, 2016 at 15:47
@oderfla a template engine is plain javascript :) I guess what you mean is that you can't use an external library? — Sander Sluis
– Sander Sluis, Commented Jul 6, 2016 at 15:49
There is this post that will help you (suggests using innerHTML): stackoverflow.com/questions/11422095/… — Sander Sluis
– Sander Sluis, Commented Jul 6, 2016 at 15:51

Kyle Thompson · Accepted Answer · 2016-07-06 15:59:26Z

5

You can try something along these lines:

for(i = 0;i<howeverManyYouNeed;i++)
{
    document.getElementById("parentId").innerHTML += "<div>col"+i+"</div>";
}

answered Jul 6, 2016 at 15:59

Kyle Thompson

18212 bronze badges

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

1 Comment

Pawan Nogariya Over a year ago

He says he is already doing this currently. But he wants to put it in html.

Hrishi · Accepted Answer · 2016-07-06 16:00:42Z

1

I would suggest you write your own minimal templating library if you're using ES-6 templates. See this blogpost on how to do that: http://www.2ality.com/2015/01/template-strings-html.html

answered Jul 6, 2016 at 16:00

Hrishi

7,1285 gold badges29 silver badges27 bronze badges

Collectives™ on Stack Overflow

Repeat HTML code with plain Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related