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

DOM 乱序编辑

DOM edits out of order

javascript

variadic