Question

我刚刚在w3schools Javascript教程中碰到了这一点：

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;

text = "<ul>";
for (i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

我了解什么是数组以及如何遍历它们，但是我需要有关它们从数组创建无序列表的部分的帮助。有人可以帮忙吗？

预先感谢，瓦西

Answer 1

该代码不会不会从数组创建无序列表。它以一个字符串开头，创建一个包含HTML标记的字符串：

text = "<ul>";

然后为字符串中的每个条目添加一次：

text += "<li>" + fruits[i] + "</li>";
//   ^^-- adds to the end of the string (well, technically it creates a new string
//        and updates `text` to contain the new string)

然后在循环后添加结尾</ul>：

text += "</ul>";

最后，text是其中包含以下HTML的字符串：

<ul><li>Banana</li><li>Orange</li><li>Apple</li><li>Mango</li></ul>

要真正创建无序列表，必须对HTML进行解析。他们稍后可能会执行以下操作：

someElement.innerHTML = text;

实时示例：

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;

text = "<ul>";
for (i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

document.getElementById("some-element").innerHTML = text;

<div id="some-element"></div>

在元素上分配innerHTML属性会使浏览器解析HTML并创建适当的DOM节点/元素，然后用那些节点/元素替换元素的内容。

不过，还有其他方法，例如insertAdjacentHTML，可让您在元素之前，之后，在其内部开始（而不替换其现有内容）或在其内部插入节点/元素。（而不替换其现有内容）。例如，它插入到body的末尾：

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;

text = "<ul>";
for (i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

document.body.insertAdjacentHTML(
  "beforeend", text
);

<div>Content already in the `body` element before `insertAdjacentHTML`.</div>

或者，如果您想解析DOMParser而不将其添加到任何文档中，则可以使用它：

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;

text = "<ul>";
for (i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

var parser = new DOMParser();
var doc = parser.parseFromString(text, "text/html");
var liElements = doc.querySelectorAll("li");
console.log("`li` elements found: " + liElements.length);

数组中的Javascript无序列表

1 个答案: