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

Question

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

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

所以。。。有多少种方法可以创建上述数组的所有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>