Javascriptはforループの前にhtmlタグを追加します

Question

私はulタグを作成しようとしていますが、ここではli要素を動的に作成するforループを作成しようとしています。ループが完了した後に別の終了ulタグが作成されます。

コードは機能します。コードが私が望むように順番に実行されないという問題を除いて。 innerHTMLに直接割り当て

<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

悪い考えです：ループのためのより多くのように見えるのhtmlその結果は、ページに加工することができる前にulタグが閉じられていますここに。 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（作成要素参照）関数を使用することを好みます。このようにして、個々のオブジェクトを異なる色に割り当てるなど、各タグを動的にレンダリングする代わりに、個々のタグを動的にレンダリングしてinnerHTML要素として挿入することができます（<li>タグ）。

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>