如何使用模板文字将循环项包装在 <li> 标签中

问题描述

专家您好，我正在尝试遍历一个数组并将其显示为正文中的 HTML。我为此使用模板文字。但是当我在模板文字中使用 <li> 标签时，它不起作用。你能检查一下，让我知道哪个是正确的方法。提前致谢！。代码如下：

    let uls = "<ul>";
    for(i=0;i<a.length;i++){
     `${uls+=a[i]}`;
    }
    let ulc = "</ul>";
    let list = uls+=ulc;
    document.write(list);

解决方法

您可以使用 document.createElement 在 JavaScript 中创建元素。 然后只需使用 appendChild 在 HTML 中附加元素。

这是一个小演示

let body = document.querySelector("body");
let ul = document.createElement("ul");

for(let i=0; i<5; i++){
    ul.innerHTML += `<li>${i+1}</li>`;
}

body.appendChild(ul)

,

这是错误的：

`${uls+=a[i]}`

应该是：

uls += a[i]

当您的表达式不包含字符串文字时，无需使用模板文字。您只是将一个变量的内容附加到另一个变量。

,

有几种可能。这里有一些想法。

顺便说一句：不要use document.write。

const lis = [`li 1`,`li 2`,`li 3`];

document.body.insertAdjacentHTML(
  "beforeend",`<ul>${lis.map(li => `<li>${li}</li>`).join("")}</ul>`
);

// Or use DOM manipulation
const ul = document.createElement("ul");
lis.forEach(content => {
    const li = document.createElement("li");
    li.appendChild(document.createTextNode(content));
    ul.appendChild(li);
  });
document.body.appendChild(ul);

,

使用 forEach 循环而不是 for 循环添加列表项要容易得多，因为使用普通的 for 循环你需要在旁边添加索引...

看这个例子：

  // Defining a variable and adding opening tag for list 
  let list = "<ul>";
  
  // Looping for each value in list array
  let list_array = ["a","b","c"]
  list_array.forEach( li =>{
    list += `<li> ${li} </li>`
  })
  
  // Adding closing tag
  list += "</ul>";
  document.write(list)
  console.log(list)

使用普通 for 循环

  let a = ["a","c"]
  let ul = "<ul>";
  for (i = 0; i < a.length; i++) {
      ul += `<li>${a[i]}</li>`
  }
   ul += "</ul>";

  document.write(ul);

,

您可以使用 document.createElement 在 JavaScript 中创建元素。然后只需使用 appendChild 将元素附加到 HTML 中。

这是一个小演示

let body = document.querySelector("body"); 让 ul = document.createElement("ul");

for(let i=0; i<li>${i+1}</li>; }

body.appendChild(ul)