How to create html elements dynamically?

Question

I have an array

var elms = ["When?", "Why", "Where", ......];

I need to create the following elements

<html .. whatever> 

<div id="q1"> When?  </div>
<input type="text" id="a1"></input>

<div id="q2"> Why?  </div>
<input type="text" id="a2"></input>

<div id="q3"> Where?  </div>
<input type="text" id="a3"></input>

........
</html>

How can I do this ?

PS: My original page has only this array var elms and nothing else. I need to create all those divisions and inputs. I tried jquery, but messed up with the single and double quotes . . so I gave up.

you tagged this question as jQuery, have you actually gone to the jQuery site and read through the examples? Because this is very basic "using jquery" stuff and really not what you should be asking about on Stackoverflow. First try to find out on your own, then write code, then if that code doesn't work, we're here to help you figure out why (after you first tried to figure it out yourself) — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Sep 12, 2014 at 1:31
then you didn't try enough things, and/or or didn't read spend enough time reading the many examples the jquery site has on offer for you. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Sep 12, 2014 at 1:33
this isn't a how to learn a programming language site. Question shows a complete lack of research effort — charlietfl
– charlietfl, Commented Sep 12, 2014 at 1:35
Just to be clear. Do you mean that elms[0] would generate the entire HTML <div id="q1"> When? </div><input type="text" id="a1"></input>? — Spencer Wieczorek
– Spencer Wieczorek, Commented Sep 12, 2014 at 1:39

Jay · Accepted Answer · 2014-09-12 01:46:28Z

4

 var el;
 var idName;
 for(var i = 0; i < elms.length; i++){
   idName = "q" + i;
   el = document.getElementById(idName);
   el.innerHTML = elms[i];
 }

Start your div ids with a index of 0 i.e id="q0" to make indexing easy

You can also do this with jquery:

 var el;
 var idName;
 for(var i = 0; i < elms.length; i++){
   idName = "#q" + i;
   $(idName).html(elms[i]); 
   // items in the html( .. ) can be done only in 
   // newer versions of jquery (I think) correct me if im wrong
 }

If they don't already exists:

 var id;
 for(var i = 0; i < elms.length; i++){
  id = "q" + i;
  $("#containerDiv").append(
   "<div id="+id+">"+elms[i]+"</div><input type=\"text\" id=\"a2\"></input>"
   );
 }

edited Sep 12, 2014 at 1:46

answered Sep 12, 2014 at 1:32

Jay

2,6861 gold badge18 silver badges24 bronze badges

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

2 Comments

Buras Over a year ago

THank you. But this method populates the already existing elements q1 , q2 .. I on the other hand need to create them. They are not there from the beginning

Jay Over a year ago

@Buras added it to the bottom

cssyphus · Accepted Answer · 2014-09-12 01:45:18Z

2

Working jsFiddle Demo

HTML:

<div id="result"></div>
<input type="button" id="mybutt" value="Go" />

jQuery:

var nextbit, cnt=0;
var elms = ["When?", "Why", "Where", "How"];

$('#mybutt').click(function(){
    $(this).hide(); //Hide the button
    elms.forEach(function(item){
        cnt++;
        nextbit = '<div id="q"'+cnt+'>' +item+ '</div>';
        nextbit +='<input type="text" id="a"'+cnt+'></input>';
        $('#result').append(nextbit);
    });
});

answered Sep 12, 2014 at 1:45

cssyphus

40.4k21 gold badges104 silver badges125 bronze badges

Collectives™ on Stack Overflow

How to create html elements dynamically?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related