Listview in html/javascript

First of all i am newbie in html,javascript. I'm trying to build a website referring to my android app and construct from scratch a list with custom listview ( mostly for learning and before using javascript libraries like Mootools , Ember and so on). My list:

<ul></ul> 

As a listview i use ( as an example ):

<div> <input name="num" type="button" value="1" /> <div>From: </div> <div></div> <div>To:</div> <div></div> </div> 

Now, I'm trying to create a list including three items:

<script> for(n=0;n<3;n++){ var li = document.createElement("li"); var er = document.getElementById('wrapper'); var qw = li.appendChild(er); document.getElementById('list').appendChild(qw); } </script> 

My intention is to use div 'wrapper' and all its elements as an item view 3 times but on the browser i don't see anything created from loop except from first html 'wrapper'. Any suggestions;

2 Answers

Let see what your code is doing:

// loop x3 for(n=0;n<3;n++){ // you create new element LI in li var li = document.createElement("li"); // you get WRAPPPER instance in er // what is WRAPPER? you have only one? var er = document.getElementById('wrapper'); // you add er (child) to li (parent), this is what you want? // qw is nothing, appendchild will return nothing var qw = li.appendChild(er); // you add qw (you mean WRAPPER?) to LIST x3 times, maybe you want to do this only 1 time document.getElementById('list').appendChild(qw); } 

now, this should be your solution

var er = document.getElementById('wrapper'); for(n=0;n<3;n++){ var li = document.createElement("li"); er.appendChild(li); } document.getElementById('list').appendChild(er); 

or, in case you need a wrapper per element

for(n=0;n<3;n++){ var li = document.createElement("li"); var wr = document.createElement("div"); li.appendChild(wr); document.getElementById('list').appendChild(li); } 

or, if wrapper is one and you want to clone it:

var er = document.getElementById('wrapper'); for(n=0;n<3;n++){ var li = document.createElement("li"); li.appendChild(er.cloneNode()); document.getElementById('list').appendChild(li); } 

Edit3: To hide your div not created from your loop simply wrap your div with another wrapper (that has display: none;) like so:

<div> <div> <input name="num" type="button" value="1" /> <div>From:</div> <div></div> <div>To:</div> <div></div> </div> </div> 

Notice that if you add "display: none" to your actual wrapper then the divs created with your loop won't be displayed. This is because .cloneNode also clones the style.

Edit2:

You are using position: absolute; and setting the position of each of these elements on top of one another. This also shows that you are using the same id multiple times... which you should avoid. id's should be unique.

#apo { position: absolute; width: 39px; height: 23px; z-index: 1; left: 126px; top: 34px; } #startpoli { position: absolute; width: 200px; height: 37px; z-index: 2; left: 213px; top: 19px; background-color: #98d0d2; } #pros { position: absolute; width: 48px; height: 25px; z-index: 3; left: 122px; top: 74px; } #finalpoli { position: absolute; width: 200px; height: 37px; z-index: 4; left: 213px; top: 69px; background-color: #c6d298; } 

This is the result when I remove some of your css causing the problems:

Here is the modified css for the image on top:

#wrapper { background-color: #e5e4e2; height: 200px; width: 600px; padding: 5px; font-family: Georgia, "Times New Roman", Times, serif; } .btn1{ background-color: #CAC9DB; width: 40px; height: 40px; font-size: 24px; font-weight: bold; padding: 5px; display: inline-block; } #apo { text-align: justify; vertical-align: top; display: inline; margin-top: -10px; } #startpoli { } #apo { width: 39px; height: 23px; } #startpoli { width: 200px; height: 37px; background-color: #98d0d2; } #pros { width: 48px; height: 25px; } #finalpoli { width: 200px; height: 37px; background-color: #c6d298; } 

Edit: It seems that the wrapper doesn't allow itself to be added to multiple elements at the same time. So just clone ( with .cloneNode(true) ) the original er

li.appendChild(er) doesn't return an element last I checked. Just append li to your list instead of qw

var er = document.getElementById('wrapper'); for(var n=0;n<3;n++){ var li = document.createElement("li"); li.appendChild(er.cloneNode(true)); //clone original wrapper and add it to your li document.getElementById('list').appendChild(li); //add li to your list } 

Demo