[CreateElement Loop]

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