Listview in html/javascript

Question

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 id="list"></ul>

As a listview i use ( as an example ):

<div id="wrapper">
    <input name="num" type="button" class="btn1" id="num" value="1" />
    <div id="from">From: </div>
    <div id="startcity"></div>
    <div id="to">To:</div>
    <div id="finalcity"></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;

As it is set up, you will only see 3 times From : To: but anythin else because I don't see where you add your information in these tags. A working example would be very useful. — Anwar
– Anwar, Commented Jul 24, 2015 at 7:50
Adding information from json is a further step. I don;t see not even one list item.. — ringo
– ringo, Commented Jul 24, 2015 at 7:53

Matteo Rubini · Accepted Answer · 2015-07-24 08:28:33Z

2

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

edited Jul 24, 2015 at 8:28

answered Jul 24, 2015 at 7:57

Matteo Rubini

8215 silver badges9 bronze badges

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

4 Comments

ringo Over a year ago

I'm getting one view ( coming from html 'wrapper' ) and nothing on list except from three dots

Matteo Rubini Over a year ago

You want to see the "wrapper" element multiplied x3 in list?

ringo Over a year ago

Exactly Matteo. 'wrapper' element with all its div components

Matteo Rubini Over a year ago

You cannot display the same element in multiple location, just one. A possible solution should be clone your node, give me a second

kemicofa · Accepted Answer · 2015-07-24 08:54:46Z

1

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

<div style="display: none">
    <div id="wrapper">
        <input name="num" type="button" class="btn1" id="num" value="1" />
        <div id="from">From:</div>
        <div id="startcity"></div>
        <div id="to">To:</div>
        <div id="finalcity"></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

edited Jul 24, 2015 at 8:54

answered Jul 24, 2015 at 7:53

kemicofa

17.7k10 gold badges93 silver badges145 bronze badges

8 Comments

kemicofa Over a year ago

@ringo where did you put your script? In your head or at the end of your body?

kemicofa Over a year ago

@ringo check update. I cloned er everytime I wanted to append it.

kemicofa Over a year ago

@ringo it works fine. I went on your website... it's just that it seems you have a css problem. All 3 wrappers are stacked upon one another. Remove your css and notice that it does work.

ringo Over a year ago

Why 'from',' startcity' , 'to' , 'finalcity' divs doesn't show on every list item; Is there a way to treat with wrapper div as a whole with all its components;

ringo Over a year ago

Excellent. I have no words...Thanks

|

Collectives™ on Stack Overflow

Listview in html/javascript

2 Answers 2

4 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related