Dynamically display html elements via loop

Question

I am working with javascript and jquery. I want to be able to display a buttom, some text, and/or really any html elements or components as many times as the loop allows. I am able to loop through and print alert statements

function LoopTest() {
var i=0;
var stop=5;
for (i=0;i<5;i++)
{  alert("count: " + i);   }
}

Simple enough. This would give me 5 alert statements, but instead of using alert statements, I want to be able to display a button or some text or any other html elements. So I would get five buttons displayed on an html page. Is this possible? I'm actually using a .foreach function but for ease of use, a regular for loop would suffice for now. I want to be able to do this on button click (i.e., the function that has the loop starts running once I click a button) also. I'm just not sure really how to accomplish this. Any help would be greatly appreciated. Thanks in advance.

score 6 · Accepted Answer · edited May 23 '17 at 10:31

6

With vanilla Javascript (without using jQuery):

You can use document.createElement to create any type of element you want on the page. Here's the above loop creating <INPUT TYPE='BUTTON'> elements in a <div> with an id of test:

function LoopTest() {
var i=0;
var stop=5;
for (i=0;i<5;i++) {  
 var v = document.createElement('input');
 v.type="button";
 v.value="Button " +i;
 document.getElementById('test').appendChild(v);
}
}

(In general, using document.write has been considered a bad practice for a while now.)

With jQuery, you can do:

for (i=0;i<5;i++) {  
 var btn = $("<button/>");
 btn.text('Button '+i);
 $('#test').append(btn);
}

edited May 23 '17 at 10:31

Community

1
1

answered Sep 03 '15 at 18:13

Y-Love

141
2

I think this example worked best for me. Because I am using jquery, I was able to incorporate this functionality into my own code. Thank you for your help – user1898629 Sep 03 '15 at 19:44
Thank you to everyone though that helped me out. It was one of those things where I needed to see it in order to understand it and solve it. – user1898629 Sep 03 '15 at 19:45
I've made some adjustments to my code and added a btn.id and a btn.value. Is it possible to add a btn.onClick? I'm trying to do so, but its not working for me. Nothing's happening when I click the button – user1898629 Sep 03 '15 at 21:27
If you used jQuery, use the `.on()` [function](http://api.jquery.com/on/) to add an onClick handler: `btn.on('click', function(event){ doSomething(); });` With vanilla javascript, use [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener): `button.addEventListener('click', function(event){ doSomething(); });` – Y-Love Sep 03 '15 at 22:11

score 1 · Answer 2 · answered Sep 03 '15 at 18:02

You can use innerHTML field to add any html content into container on you page.

<script>

    function LoopTest() 
    {
        var i=0;
        var stop=5;
        for (i=0;i<5;i++)
        {
            document.getElementById("container").innerHTML += "<button>button</button>"
        }
    }

</script>

...

<div id="container"></div>

score 1 · Answer 3 · answered Sep 03 '15 at 18:16

This is a solution : http://jsfiddle.net/leojavier/gbuLykdj/

<div class="container">
    <button class="trigger">Trigger</button>
</div>

JS

$('.trigger').on('click', function(){
LoopTest();
});


function LoopTest() {
    var i=0;
    var stop=5;

    for (i=0;i<5;i++){  
       $('body').append('<button class="trigger">Trigger No. ' + i + '</button>')  
    }
}

Anvesh Arrabochu · Answer 4 · 2015-09-03T18:12:43.953

Refer: document.write(), Javascript events

<html>
    <head>
        <script>
            function LoopTest() {
                var i=0;
                var stop = 5;
                for (i=0;i<5;i++)
                {  
                    document.write('<p>' + i + '</p>'); // This writes the number in a paragraph
                }
            }
        </script>
    </head>
    <body>
        <!--
            Here onclick event is used to recognize the click event,
            which is fired when the user clicks the button,
            this calls the LoopTest() function which generates 5 paragraphs with numbers
        -->
        <button onclick="LoopTest()">Click to generate content!</button>
    </body>
</html>

Dynamically display html elements via loop

4 Answers4

Linked