javascript CreateElement Loop

[Chonathun 0]

I'm a beginner learning JavaScript course. Not sure this is the right place to post this topic or not. Please bear with me.

 I have a little project in mind.

 

I want to do somthing like this:

 

<div id="typingfield" class="lightgreybackground">

  <p>

     <cha>0</cha>

     <cha>1</cha>

     <cha>2</cha>  

 

...

     <cha>38</cha>  

     <cha>39</cha>  

  </p>

 

</div>

 

using this:

 

<div id="typingfield" class="lightgreybackground">

</div>

 

  <script type="text/javascript">

 

   var para = document.createElement("p");

var cha = document.createElement("cha");

var element = document.getElementById("typingfield");

element.appendChild(para);

var text;

var node;

for (i = 0; i < 40 ; i++){

para.appendChild(cha);

for (i = 0; i < 40 ; i++){

node = document.createTextNode(i);

cha.appendChild(node);

}

}

 

  </script>

 

 

but I got this:

 

 

<div id="typingfield" class="lightgreybackground">

  <p><cha>0123456789101112131415161718192021222324252627282930313233343536373839</cha></p></div>

 

 

Please give me some guidance.

 

 

Regards,

 

Chonathun

 

[administrator 435]

If you want to create a set of tags, you need to create elements/tags ... for example:

var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

So that means, for every tag, you need to create a new element.