來自數組的 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);