将className为的元素添加到idName为的其他元素中

Question

我想添加一个已创建的具有存储在数组中的类名的元素li，并且我想将这个具有特殊类名的新元素li添加到具有id的静态元素中。顺便说一句，我们在JS对象内部。控制台显示了正确的东西，它向我显示了具有良好类名的li，但我无法将其添加到id堆栈图标中。

我希望最终的结果是：在我的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

如果使用jQuery选择元素，则没有名为appendChild的方法。Jquery具有append方法，通过该方法可以在ul中附加元素。我在这里添加了两种方法(jquery和javascript(，通过这两种方法可以实现您的目标。以下是工作示例：

var icons = ["fab fa-html5", "fab fa-css3"];
// 1st way using javascript
var 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 jquery
var 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">
<li>Default</li>
</ul>

Answer 3

使用appendChild而不是appenChild。另外，使用document.querySelector来选择dom元素。

如果您使用的是jQuery，那么请使用append()而不是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>