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

这是什么原因？ variadics是异步执行还是其他什么？

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编辑不按顺序

2 个答案: