我正在嘗試添加 Tailwindcss 樣式類以列出從陣列中附加到 HTML 檔案的專案：
const array1 = ['one', 'two', 'three', 'four', 'five']
for (let i = 0; i < array1.length; i ) {
let li = document.createElement('li')
document.querySelector('#newList').append(array1[i], li)
}
querySelector 系結到 tailwindcss 模板中的 UL 元素：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 >
My Todo list
</h1>
<div>
<ul id="newList"></ul>
</div>
<script src="app.js"></script>
</body>
</html>
我希望每個 LI 元素都具有以下 tailwindcss 類：
<li href="#" class="block p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"></li>
如何配置 JS 或 HTML 以動態地將這些類附加到陣列中的每個 LI 元素？
uj5u.com熱心網友回復：
如果你想附加到一個節點作為孩子，我認為使用appendChild()像這樣：
const array1 = ['one', 'two', 'three', 'four', 'five']
for (let i = 0; i < array1.length; i ) {
let li = document.createElement('li')
li.innerHTML = array1[i]
li.classList.add('block', 'p-6', 'max-w-sm', 'bg-white', 'rounded-lg', 'border', 'border-gray-200', 'shadow-md', 'hover:bg-gray-100', 'dark:bg-gray-800', 'dark:border-gray-700', 'dark:hover:bg-gray-700')
document.querySelector('#newList').appendChild(li)
}
uj5u.com熱心網友回復：
可以通過將類名附加到 DOMElement 上的 classList 來完成。從這里獲取參考 - https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
它看起來像：
let x = document.createElement('div');
x.classList.add('className');
注意：此外，li元素應附加到ul#newList元素而不是document;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/475619.html
標籤：javascript 数组 for循环 附加 顺风CSS