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.

Community · Accepted Answer · 2017-05-23 10:31:03Z

8

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, 2017 at 10:31

CommunityBot

11 silver badge

answered Sep 3, 2015 at 18:13

Y-Love

1612 bronze badges

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

4 Comments

user1898629 Over a year ago

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 Over a year ago

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 Over a year ago

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

Y-Love Over a year ago

If you used jQuery, use the .on() function to add an onClick handler: btn.on('click', function(event){ doSomething(); }); With vanilla javascript, use addEventListener: button.addEventListener('click', function(event){ doSomething(); });

m.antkowicz · Accepted Answer · 2015-09-03 18:02:38Z

1

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>

answered Sep 3, 2015 at 18:02

m.antkowicz

13.7k22 silver badges43 bronze badges

Comments

Anvesh Arrabochu · Accepted Answer · 2015-09-03 18:12:43Z

1

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>

edited Sep 3, 2015 at 18:12

answered Sep 3, 2015 at 18:07

Anvesh Arrabochu

1651 gold badge2 silver badges12 bronze badges

Comments

Leo Javier · Accepted Answer · 2015-09-03 18:16:00Z

1

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>')  
    }
}

answered Sep 3, 2015 at 18:16

Leo Javier

1,41314 silver badges19 bronze badges

Collectives™ on Stack Overflow

Dynamically display html elements via loop

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related