Creating sub-tags & their classes through a given array dynamically in JavaScript

Question

I want to know that there are how many ways in JS to create sub tags and their classes names from a given array eg array =['one','two','three','four','five']. If I be more specific I have already created main tags ie <li class="card"></li>............<li class="card"></li> of class deck through JS

`let displayCards = document.querySelector('.deck');
 for (i=0; i < symbols.length; i++) {
    let cards = document.createElement('li');
    cards.classList.add('card');
    displayCards.appendChild(cards);
 }`

this is the end result I want:

<ul class="deck">
    <li class="card">
        <i class="one"></i>
    </li>
    <li class="card">
        <i class="two"></i>
    </li>
    <li class="card">
        <i class="three"></i>
    </li>
</ul>

SO...How many ways to create sub-tags and sub-classes of all class card of above mentioned array. Many Thanks

I didn't understand what is the end result you want? please provide what do you really need — Zeeshan Adil
– Zeeshan Adil, Commented Jul 13, 2018 at 13:15
this is the end result that I want. Thanks <ul class="deck"> <li class="card"> </li> <li class="card"> </li> <li class="card"> </li> ..................... /ul> — JaseyJS
– JaseyJS, Commented Jul 13, 2018 at 13:28
Hey sorry for the delay, I just posted my answer, have a look and let me know if it works. — Zeeshan Adil
– Zeeshan Adil, Commented Jul 16, 2018 at 6:21

Kiran Joshi · Accepted Answer · 2018-07-16 06:40:07Z

1

Here's what you can do it's just like what you tried already.

Html:

 <ul class="deck">
 </ul>

JS:

             <script>
              $(document).ready(function () {
                    var symbols = ['one', 'two', 'three', 'four', 'five']
                    let displayCards = document.querySelector('.deck');
                    for (i = 0; i < symbols.length; i++) {
                          let cards = document.createElement('li');
                          cards.classList.add('card');
                          let childCard = document.createElement('i');
                          childCard.classList.add(symbols[i]);
                          childCard.innerHTML += symbols[i];
                          cards.appendChild(childCard);
                          displayCards.appendChild(cards);
                    }
              });

        </script>

edited Jul 16, 2018 at 6:40

Kiran Joshi

1,8763 gold badges15 silver badges36 bronze badges

answered Jul 16, 2018 at 6:19

Zeeshan Adil

2,1555 gold badges26 silver badges47 bronze badges

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

Collectives™ on Stack Overflow

Creating sub-tags & their classes through a given array dynamically in JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related