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添加部分元素将导致问题。