来自数组的 Javascript 无序列表

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);