javascript - 在 JavaScript 中通过给定的数组动态创建子标签及其类

Question

我想知道在 JS 中有多少种方法可以从给定的数组中创建子标签及其类名，例如 array =['one','two','three','four','five'] .如果我更具体一点，我已经创建了主标签，即 <li class="card"></li>............<li class="card"></li>的 class deck通过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);
 }`

这是我想要的最终结果:

<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...有多少方法可以创建所有的子标签和子类class card上面提到的数组。非常感谢

Answer 1

这是您可以做的，就像您已经尝试过的一样。

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>