JavaScript-将列表替换为<；中的列表；李>；元素

救命啊。我对JavaScript和jQuery非常着迷，并且是一个初学者

我可以在web上找到替换DOM中一个子元素的示例

我发现的一个例子是在，标题是“HTML DOM replaceChild（）方法” 这告诉我如何更换一个。如何替换其中16个的列表？（八对）

我已经为此工作了两周（断断续续）（每天一次半小时或更多），这让我发疯。答案似乎很简单

我需要用另一个列表替换一个列表。我想我需要先把它变成一个数组，但不确定

我知道如何使用以下命令获取列表并将其转换为数组：

//grabs all the inner values as a NodeList

var cardsInnerVal = document.querySelectorAll('li.card i');

//turns each of the inner values into an array

var cardsInnerValArray = Array.from(cardsInnerVal);

---

这是原始的DOM结构，我需要替换的是I元素

我所拥有的：

<ul class="deck">
  <li class="card">
    <i class="fa fa-diamond"></li>

---

我试过很多不起作用的东西 一次函数尝试-但这是一个错误：

未捕获的TypeError:deckField.appendChild不是函数

我认为这可能不起作用，因为它不在一个循环中

var deckField = document.querySelector('deck');

// Deal cards to initialize the Game

function deal() {

  for (const item of cardsInnerValArray) {
    $deckField = $('.deck');

    const li = document.createElement('li');
    const icons = item;

    li.classList.add('card');
    li.innerHTML = deckField.appendChild(li);
  }

}

deal();

---

有人能理解这一点并帮助我吗？

我在那里看不到多少jQuery。此外，您显示的HTML列表不起作用，因此很难确定最终结果是什么

你是说像这样的事吗

<ul class="deck">
        <li class="card">card 1</li>
        <li class="card">car 1</li>
        <li class="card">plane 1</li>
        <li class="card">train 1</li>
        <li class="card">card 2</li>
        <!-- etc etc...-->
</ul>

然后jQuery“each”函数将如下循环：

["car", "train", "plane", "bus"]

索引=0，值=“汽车”

索引=1，值=“列车”

index=2，value=“平面”

索引=3，value=“总线”

---

因此，在jQuery的“each”循环中，您主要只需要使用“value”部分来添加所需的数据。因此，我在上面编写了代码

你在寻找什么样的最终结果？在像这样的问题中，用一些文本和/或代码来显示你开始的html和最后想要的html是很有帮助的，这些文本和/或代码显示了两者之间的关系。

。querySelector（'deck'）

必须是

querySelector（'.deck'）

，但最相关的信息仍然不在其中。正如我之前的其他评论者所说。对不起，下面是这些项目的html。谢谢你的评论。对不起，我想我已经包含了足够多的html，让我对我的开始有了一个很好的了解。下面是html的一部分。我不能把所有的都包括进去。我收到一条信息，说我已经超限了。下面是三个li元素的示例。总共有16个。八双

谢谢斯图尔特。是的，这就是html的外观。当我尝试在Chrome控制台中运行它时，它告诉我$（'.deck'）.html（“”）；不是函数。@RickP项目中是否包含jQuery<代码>$（'.deck'）.html（“”应该可以正常工作。我在目前的工作中使用了很多版本。谢谢斯图尔特。我忘了在html中添加jQuery作为src。

//Clear the deck. Select it by the class you've given it
//(though it may be safer to give it an id, so you can select
//specifically without worrying about catching any others), then
//clear all the html it contains.

$('.deck').html("");

//use jQuery 'each' to loop over array and put new list items
//into the inner html of the list

$.each(cardsInnerValArray, function(index, value){
    $('.deck').append('<li class="card">' + value + '</li>');
})

$.each(cardsInnerValArray, function(index, value){
    $('.deck').append('<li class="card"><i class="' + value + '"></i></li>');
}); 

["car", "train", "plane", "bus"]