如何在 JavaScript 中使用循环创建这些元素

Question

我想使用 JavaScript 将一些项目添加到ul中。 现在我正在使用createTextNode和createElement 。 无论如何要使用循环添加这些项目，以使代码更短？

 const ul = document.querySelector('ul'); const listFeelTemp = document.createElement('li'); const listTempMin = document.createElement('li'); const listTempMax = document.createElement('li'); const listPressure = document.createElement('li'); const listHumidity = document.createElement('li'); listFeelTemp.appendChild(document.createTextNode(`Feeeling temp is ${resFeelsTemp}°C`)) listTempMin.appendChild(document.createTextNode(`Min ${resTempMin}°C`)) listTempMax.appendChild(document.createTextNode(`Max ${resTempMax}°C`)) listPressure.appendChild(document.createTextNode(`Pressure ${resPressure}HPa`)) listHumidity.appendChild(document.createTextNode(`Humidity ${resHumidity}%`)) ul.appendChild(listFeelTemp); ul.appendChild(listTempMin); ul.appendChild(listTempMax); ul.appendChild(listPressure); ul.appendChild(listHumidity);

Answer 1

所以你的代码中唯一改变的是文本：一个好的开始是将这些文本存储在一个数组中。

然后，您可以创建一个 function 抽象出创建<li>元素并将其插入<ul>元素的所有逻辑。 这基本上是DRY的概念：与其一遍又一遍地重复相同的命令，不如将该逻辑抽象为 function 并迭代调用它。

最后，遍历您的数组并调用 function：

const ul = document.querySelector('ul');

// Abstract element & text node creation to a function
function createAndAppendListItem(text) {
    const el = document.createElement('li');
    el.appendChild(document.createTextNode(text);
    ul.appendChild(el);
}

const texts = [
    `Feeeling temp is ${resFeelsTemp}°C`,
    `Min ${resTempMin}°C`,
    `Max ${resTempMax}°C`,
    `Pressure ${resPressure}HPa`,
    `Humidity ${resHumidity}%`
]

texts.forEach(text => createAndAppendListItem(text));

当然，如果你的数据结构会更复杂，那么考虑以对象数组的形式存储数据，而不是字符串数组。

Answer 2

你可以做这个简单的方法

const array = [`Feeeling temp is ${resFeelsTemp}°C`, `Min ${resTempMin}°C`, `Max ${resTempMax}°C`, `Pressure ${resPressure}HPa`, `Humidity ${resHumidity}%` ]

const ul = document.querySelector('ul');
array.forEach((value) =>{
  const li = document.createElement('li');
  li.innerText = value
  ul.appendChild(li)
})

Answer 3

这个怎么样？

    const textValues = [
      `Feeeling temp is ${resFeelsTemp}°C`,
      `Min ${resTempMin}°C`,
      `Max ${resTempMax}°C`,
      `Pressure ${resPressure}HPa`,
      `Humidity ${resHumidity}%`
    ];
    
    const ul = document.querySelector('ul');

    for (const textValue of textValues) {
      const li = document.createElement('li');
      li.appendChild(document.createTextNode(textValue));
      ul.appendChild(li);
    }

Answer 4

我会制作一个专用的 function 来创建元素，并将 append 制作到 ul。

另一个建议是保留一个包含字符串模板的模板文字数组，并将其替换为硬编码的温度数字。

 const ul = document.createElement('ul'); const resFeelsTemp = 10; const resTempMin = 12; const resPressure = 13; const resHumidity = 10; const addUlToLi = (text) => { const li = document.createElement('li'); li.appendChild(document.createTextNode(text)); ul.appendChild(li); } const arr =[`Feeeling temp is ${resFeelsTemp}° C`, `Min ${resTempMin}°C`, `Pressure ${resPressure}HPa`, `Humidity ${resHumidity}%`]; arr.forEach(el => addUlToLi(el));

Answer 5

记录一下：您还可以使用insertAdjacentHTML创建元素

 const ul = document.querySelector('ul'); const [feel, min, max, press, hum] = [22, 11, 25, 97.88, 45]; [`Feeling temp is ${feel}°C`, `Min ${min}°C`, `Max ${max}°C`, `Pressure ${press}HPa`, `Humidity ${hum}%`].forEach(txt => ul.insertAdjacentHTML("beforeend", `<li>${txt}</li>`));

 <ul></ul>