将具有 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 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>