首頁猿問將具有 className...

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

JavaScript

千巷貓影 2023-09-28 16:41:01

我想添加一個創建的元素 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);

查看完整描述

2 回答

陪伴而非守候

TA貢獻1757條經驗獲得超8個贊

使用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);

反對回復 2023-09-28

慕萊塢森

TA貢獻1810條經驗獲得超4個贊

使用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();

? <li>ABC</li>

</ul>

反對回復 2023-09-28

互換的青春

TA貢獻1797條經驗獲得超6個贊

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);

<li>Default</li>

</ul>

反對回復 2023-09-28

2 回答
0 關注
149 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

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

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

2 回答

添加回答