Create multiple div with multiple elements dynamically using javascript?

Question

I am new in javascript, I want to create div which have multiple div and multiple elements.See code below

<style>
    .list-group li {
        list-style: none;
    }

    .panel-info, .panel-rating, .panel-more1 {
        float: left;
        margin: 0 10px;
        height: 60px;
    }

    .icon {
        height: 30px;
        width: 30px;
    }

    .header {
        background-color: #f44336;
        padding: 15px 20px;
        color: white;
        text-align: center;
    }
</style>

<div id="listContainer">
    <div>
        <ul class="list-group">
            <li>

                <div class="panel-body panel panel-default" style="height: 70px;">
                    <div class="panel-info">
                        <p><strong>Shailendra Kushwah</strong></p>

                    </div>

                    <div class="panel-more1">
                        <img src="img/feestatus/cancel-button.png" class="icon" />
                        <br /><span>Installment 1</span>
                    </div>
                    <div class="panel-more1">
                        <img src="img/feestatus/cancel-button.png" class="icon" />
                        <br /><span>Installment 2</span>
                    </div>
                    <div class="panel-more1">
                        <img src="img/feestatus/cancel-button.png" class="icon" />
                        <br /><span>Installment 3</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

I want to create element of Div id="listContainer" dynamically on the basis of length of my array using loop.Please help

What is this array? I mean what does it contain information to diaplay in table by any chance? — Ajay Narain Mathur
– Ajay Narain Mathur, Commented Jan 10, 2017 at 6:29

marmeladze · Accepted Answer · 2017-01-10 10:06:53Z

2

There is no js, no array. But independent of all those,

If you want to add an element to the current DOM structure,

First, you need to create it.

var new_element = document.createElement('div') 
//might be p, span, ol, li, a, section etc.

Then append it wherever you want.

var my_container = document.getElementById("my-container")
my_container.appendChild(new_element);
/* 
* for most bottom of current dom node
* document.body.appencdChild(new_element)
*/

Hence you have a reference to that element, you can set attributes via javascript.

new_element.setAttribute('id', 'new-element-id')
//<div id='new-element-id' ... 
new_element.classList.add('lorem')
//<div id='new-element-id' class='lorem' ...
new_element.classList.add('ipsum')
//<div id='new-element-id' class='lorem ipsum' ...

If you want to add multiple elements, this is also not difficult.

var giants = ['marx', 'engels', 'lenin']
for(i=0; i<giants.length; i++) {
   var g = document.createElement('div');
   g.setAttribute('id', giants[i]);
   document.body.appendChild(g);
}

or, more stylish

giants.forEach(function(e) { 
  var g = document.createElement('div'); 
  g.setAttribute('id', e); 
  document.body.appendChild(g);  
})

below snippet will add 5 divs (including images and span and span texts) with some data.

insert_divs = function() {
  var parent = document.getElementsByClassName("panel-body")[0];
  var installments = ['Installment 1', 'Installment 2', 'Installment 3', 'Installment 4', 'Installment 5'];
  
  installments.forEach(function(e){
   
   var sp = document.createElement('span');
   var img = document.createElement('img'); 
   var installment = document.createElement('div');
   
   var span_text = document.createTextNode(e);
   sp.appendChild(span_text);

   img.setAttribute('src', 'https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_cancel_48px-128.png')
   installment.classList.add('panel-more1');
   
   installment.appendChild(img);
   installment.appendChild(sp);
   
   parent.appendChild(installment);

  });
  


}

window.onload = insert_divs

<div id="listContainer">
    <div>
        <ul class="list-group">
            <li>
                <div class="panel-body panel panel-default" style="height: 70px;">
                    <div class="panel-info">
                        <p><strong>Shailendra Kushwah</strong></p>

                    </div>

               </div>
            </li>
        </ul>
    </div>
</div>

edited Jan 10, 2017 at 10:06

answered Jan 10, 2017 at 7:05

marmeladze

6,5863 gold badges28 silver badges49 bronze badges

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

3 Comments

marmeladze Over a year ago

so, where do you want to append child elements? and what is your array (you stated before, length of array was basis)?

Shailendra Kushwah Over a year ago

you can take any number for length of array

Shailendra Kushwah Over a year ago

run my code snippet and see example ,in example i show one item of my list

Collectives™ on Stack Overflow

Create multiple div with multiple elements dynamically using javascript?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related