Javascript在追加循環之前添加html標記

Question

我在下面的代碼中創建一個ul標記，並在其中創建一個for循環以動態創建li元素。循環完成後會創建一個單獨的閉合標記ul。

該代碼有效。除了代碼不按照我想要的順序運行的問題。該ul標籤關閉之前的for循環可以加工成的頁面，從而在HTML看起來更像是：

<ul></ul><li>0</li><li>1</li>...

var insidethediv = document.getElementById("insidethediv"); 
 
var numero = 5; 
 

 
insidethediv.innerHTML = "<ul>"; 
 
for (i = 0; i < 5; i++){ 
 
insidethediv.innerHTML += "<li>"+i+"</li>"; 
 
} 
 
insidethediv.innerHTML += "</ul>";

<div id="insidethediv"></div>

Answer 1

直接分配到innerHTML是一個壞主意這裏。 innerHTML需要完整的html片段，即所有打開的標籤都應該關閉。但是在這裏你正在建立一個部分的html片段。嘗試先創建完整的html，然後將其分配給innerHTML，例如像這樣：

var insidethediv = document.getElementById("insidethediv"); 
var numero = 5; 

var s = "<ul>"; 
for (i = 0; i < 5; i++){ 
    s += "<li>"+i+"</li>"; 
} 
s += "</ul>"; 
insidethediv.innerHTML = s; 

Answer 2

我個人更喜歡使用使用document.createElement（標籤名稱）和元素 .append（創建的元素參考）功能。通過這種方式，我們可以操縱每個個體（如分配不同的顏色）並動態呈現HTML標記，而不是將所有內容都干擾到一個字符串中，然後將其作爲innerHTML元素插入。

var insidethediv = document.getElementById("insidethediv"); 
 
var numero = 5; 
 

 
var ul_element = document.createElement("ul"); 
 
insidethediv.append(ul_element); 
 

 
var li_element; 
 

 
for (var i = 0; i < 5; i++){ 
 
    li_element = document.createElement("li"); 
 
    ul_element.append(li_element); 
 
    li_element.innerHTML = i; 
 
}

<div id="insidethediv"></div>