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

Question

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

`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上述所有数组的子标签和子类。非常感谢

标签： javascripthtml

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>