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

Question

您好专家，我正在尝试遍历数组并将其显示为正文中的 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);

Answer 1

这是错误的：

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

应该是：

uls += a[i]

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

Answer 2

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

顺便说一句：不要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);

Answer 3

您可以使用 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)

Answer 4

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

使用正常循环

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

  document.write(ul);

Answer 5

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

将元素附加到 HTML 中

这是一个小演示

让正文 = document.querySelector("正文"); 让 ul = document.createElement("ul");

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

body.appendChild(ul)

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

How can i wrap loop items in an <li> tag using Template Literals

javascript

loops

for-loop

templates

literals