如何将 tailwindcss 类动态附加到 JavaScript 中的每个列表项

Question

我正在尝试添加 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 class="text-3xl font-bold underline">
      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 元素？

Answer 1

可以通过将 class 名称附加到 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;

Answer 2

如果你想作为子节点附加到一个节点，我想使用 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)
}

如何将 tailwindcss 类动态附加到 JavaScript 中的每个列表项

How to dynamically append tailwindcss classes to each list item in JavaScript

javascript

arrays

for-loop

append

tailwind-css

如何将 tailwindcss 类 动态附加到 JavaScript 中的每个列表项

How to dynamically append tailwindcss classes to each list item in JavaScript

javascript

arrays

for-loop

append

tailwind-css

如何将 tailwindcss 类动态附加到 JavaScript 中的每个列表项