Question

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

`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>

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

1 个答案: