使用从对象中获取的参数创建一个元素 - JavaScript

Question

我想创建一个函数，从数组中获取数据并在 HTML + 适当的参数中创建适当的标签。当有多个参数时会出现问题。

他们形成但不在一起只是分开。

var elem = [[
    // <div class"container"></div> //Example
    ["div", "container"],
    ["form", {method: "POST", name: "contant"}], //Two objects (arguments for html)
    ["div", "box"]
]];
class Form {
    constructor(index) {
        this.index = index;
    };

    createField() {
        for(const marker of elem[this.index]) {
            if(marker[1] instanceof Object) {
                for(var test of Object.keys(marker[1])) {
                    console.log(this.createElement(marker[0], {
                        [test]: marker[1][test]
                    }));
                }
            } else { //If there is no object, it adds a class
                var key = 'class';
                var value = marker[1]
                console.log(this.createElement(marker[0], {
                    [key]: value
                }));
            }
        };
    };

    createElement(elementName, attributes) {
        this.element = this.createElement.call(document, elementName);

        if(attributes && !(attributes instanceof Object)) {
            throw Error('Error attributes');
        } else if(attributes) {
            for(const attr of Object.keys(attributes)) {
                this.element.setAttribute(attr, attributes[attr]);
            };
        };
        return this.element;
    };

我想让它有这两个参数，而不是从一个参数创建两次

Answer 1

您正在单独传递属性，只需使用整个对象。

      if(marker[1] instanceof Object) {

            console.log(this.createElement(marker[0], marker[1]));
        }

Answer 2

您可以使用下面的功能。它将为每个子数组创建新元素，并检查每个子数组的第二个元素是对象还是字符串，然后相应地添加元素属性。

注意：我添加了一些CSS以便创建的元素可以更容易地看到，用于测试目的。

测试如下：

var elements = [
    ["div", "container"],
    ["form", {method: "POST", name: "contant"}],
    ["div", "box"]
];

function createElements(list) {
  list.forEach(function(el, i) {
    let elem = document.createElement(el[0]);
    
    if(typeof el[1] == "object") {
      let keys = Object.keys(el[1]);
      for(let attr of keys) {
        elem.setAttribute(attr, el[1][attr]);
      }
    } else if(typeof el[1] == "string"){
      elem.setAttribute("class", el[1]);
    }
    document.body.append(elem);   // append element to body or any other element of your choice
  });
}

createElements(elements);

.container {
  position: relative;
  float:left;
  width: 50px;
  height: 50px;
  background-color: #000;
}

.box {
  position: relative;
  float:left;
  width: 50px;
  height: 50px;
  background-color: #09f;
}

form[name="contant"] {
  position: relative;
  float:left;
  width: 50px;
  height: 50px;
  background-color: #f00;
}

使用从对象中获取的参数创建一个元素 - JavaScript

Creating one element with arguments taken from the object - JavaScript

javascript

arguments

object

createelement