DOM編輯無序

Question

我有一個功能，增加了一個形式到我的網頁：

var board = document.getElementById("board"); 

board.innerHTML += "<form id='" + arguments[0] + "'>"; 

for (var i = 1; i < arguments.length; i++) { 
    board.innerHTML += "<input type='"; 

    var variable = arguments[i]; 

    board.innerHTML += variable.val.constructor.name + "' name='"; 
    board.innerHTML += variable.name + "'"; 

    board.innerHTML += "></input>"; 
} 

board.innerHTML += "</form>"; 

console.log(document.getElementById("board").innerHTML); 

對於每個參數（除了形式的ID），它增加了一個項目的形式。

檢查此函數產生的HTML，看起來循環在行board.innerHTML += "</form>"後面運行。 console.log輸出以下：

<form id="example_name"></form>Number' name='x'&gt

什麼的原因呢？變量是異步執行的還是其他的東西？

Answer 1

您不能將HTML元素的一部分追加到innerHTML值，因爲瀏覽器立即試圖解析它，並且會忽略任何格式錯誤的東西。

將內容累積到一個簡單的JavaScript變量中，然後在完成整個事情時設置.innerHTML。

Answer 2

我會構建字符串，然後將其添加到innerHTML。

var board = document.getElementById("board"); 
var html = ''; 

html += "<form id='" + arguments[0] + "'>"; 

for (var i = 1; i < arguments.length; i++) { 
    html += "<input type='"; 

    var variable = arguments[i]; 

    html += variable.val.constructor.name + "' name='"; 
    html += variable.name + "'"; 

    html += "></input>"; 
} 
html += "</form>"; 
board.innerHTML += html; 

變量未執行異步，但向DOM添加部分元素將導致問題。