将具有 className 的元素添加到具有 idName 的其他元素

Question

我想添加一个创建的元素 li ，其类名存储在数组中，并且我想将这个具有特殊类名的新元素 li 添加到具有 id 的静态元素中。我有一个错误 appenChild 不是函数。顺便说一句，我们在一个 JS 对象内部。控制台显示了正确的内容，它向我显示了具有良好类名的 li，但我无法将其添加到 id stacks-icons 中。

我希望最终结果是：在我的 ul 中添加一个新的 li，其类名是我在数组图标中选择的。

这里是 HTML 和 JS ：

<ul id="stacks-icons">

  <li></li>

</ul>

和 JS（构造函数中的变量）

    this.icons = ["fab fa-html5", "fab fa-css3"];

    this.iconsRow = $('#stacks-icons');

以及方法

    let i = document.createElement('li');

    i.className = this.icons[1];

    this.iconsRow.appenChild(i);

    console.log(i);

Answer 1

使用querySelector查找DOM元素并将appenChild更改为appendChild，如下所示let icons = ["fab fa-html5", "fab fa-css3"];let ir = document.querySelector('#stacks-icons');let i = document.createElement('li');i.className = icons[1];ir.appendChild(i);

Answer 2

使用appendChild而不是appenChild. 另外，用于document.querySelector选择 dom 元素。如果您使用 jQuery，则使用append()not ，appendChild()因为您是通过 jQuery 方法获取元素，所以您也应该使用 jQuery 方法进行追加。示例片段如下 -class Iconlist{  constructor(){    this.icons = ["fab fa-html5", "fab fa-css3"];    this.iconsRow = $('#stacks-icons');  }    create(){    let i = document.createElement('li');    i.textContent = "Some text";    i.className = this.icons[1];    this.iconsRow.append(i);    console.log(i);  }}let mi = new Iconlist();mi.create();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul id="stacks-icons">  <li>ABC</li></ul>

Answer 3

appendChild如果您使用 选择该元素，则不会调用任何方法jQuery。Jquery 有append一个方法，您可以通过它在ul. 我在这里添加了两种方法（jquery 和 javascript），您可以通过它们实现您的目标。这是工作示例：var icons = ["fab fa-html5", "fab fa-css3"];// 1st way using javascriptvar ul = document.getElementById("stacks-icons");let i = document.createElement('li');i.className = icons[0];i.appendChild(document.createTextNode("1st using javascript"));ul.appendChild(i);// 2nd way using jqueryvar iconsRow = $('#stacks-icons');let i1 = document.createElement('li');i1.className = icons[1];i1.appendChild(document.createTextNode("2nd using jquery"));iconsRow.append(i1);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><ul id="stacks-icons">&nbsp; &nbsp; <li>Default</li></ul>