Question

我正在创建一个包含许多不同div的动态表单。每个div都有自己独特的输入组合。我已经读过appendChild比更改innerHTML更快，所以我的解决方案是构建数组。每个数组都是表单中的div，并且在每个数组中定义了多个对象。每个对象都是一个输入。

e.g：

        var div = [
            label = {
                tag: "label",
                text: "Enter password",
                for: "pass"
            },
                input = {
                tag: "input",
                type: "password",
                name: "pass"
            }
        ];

首先，我使用foreach语句将对象的属性附加到新元素上像这样的setAttribute :(使用'tag'属性作为html标签而不是删除它，因此它不会作为属性出现。）

for(var elem in div) {
    var temp = document.createElement(div[elem].tag);
    delete div[elem].tag;
    for(var prop in div[elem]) {
        temp.setAttribute(prop,input[prop]);
    }
    parentDiv.appendChild(temp);
}

问题是我有更多的东西要添加到无法通过属性添加的元素。喜欢：innerText。那么也许我可以使数组成为一个属性数组，我可以合并到'temp'节点？

提前致谢！

Answer 1

你可以在for循环之前的不同部分处理它，就像这样

for(var elem in div) {
  var temp = document.createElement(div[elem].tag);
  delete div[elem].tag;

  // add the other properties
  ["innerHtml", "innerText"].forEach(function (attr) {
     if(div[ele][attr]) {
        temp[attr] = div[ele][attr]
        delete div[ele][attr];
  });

  // add the attributes
  for(var prop in div[elem]) {
     temp.setAttribute(prop.input[prop]);
  }
  parentDiv.appendChild(temp);
}

将对象的属性或数组附加到节点的属性

1 个答案: