JavaScript createElement 函数

Question

我有一些代码在 main.js 文件中复制

Javascript 重复示例:

Example 1
for (i = userVote; i < 5; i++) {
var newVotesInput = document.createElement("input");
newVotesInput.id = "vote" + i;
newVotesInput.classList.add("vote", "displayn");
newVotesInput.type = "radio";
newVotesInput.name = "vote";
newVotesInput.value = i;
someElement.appendChild(newVotesInput);
}

Example 2
for (i = 1; i <= userVote; i++) {
var newVotesLabel = document.createElement("label");
newVotesLabel.id = "voteLabel" + i;
newVotesLabel.classList.add("voteHover");
newVotesLabel.htmlFor = "vote" + i;
someElement.appendChild(newVotesLabel);
}

Example 3
var newImg = document.createElement("img");
newImg.classList.add("babeImg", "boxsb", "leftIn");
newImg.id = "imgSrc";
newImg.src = jsonData.imgSrc;
someElement.appendChild(newImg);

Example 4
var newShuffle = document.createElement("img");
newShuffle.classList.add("shuffleImg");
newShuffle.id = "shuffleImg";
newShuffle.src = "assets/img/refresh.png";
someElement.appendChild(newShuffle);

Example 5
newImg.classList.add("babeImg", "boxsb", "leftIn");
newImg.id = "imgSrc";
newImg.src = jsonData.imgSrc;
imgInner.appendChild(newImg);

正如您所看到的，这些示例执行相同的操作，即创建一个元素，但有几个参数因示例而异。我如何创建一个可以用于所有这些的函数？现在我只知道如何为一个特定的例子构建一个，就像这样 ->

function createElement(element, id, cls, src){
var newElement = document.createElement(element);
element.id = id;
element.classList.add(cls);
element.src = src;
someElement.appendChild(element);
}

这基本上是示例 4..但是我如何使其在所有示例中更加高效和可用？

Answer 1

我建议使用以下功能:

function createElement(type, attributes) {
  var element = document.createElement(type);
  for (var key in attributes) {
    if (key == "class") {
        element.classList.add.apply(element.classList, attributes[key]); // add all classes at once
    } else {
      element[key] = attributes[key];
    }
  }
  someElement.appendChild(element);
}

该函数采用类型(input、img 等)和属性列表(即对象/字典)。我们循环遍历属性并将它们添加到新元素中。唯一的特殊情况是类，使用不同的语法(我们可以有多个类)。以下是如何使用它:

var input = createElement("input", {
  "id": "myId",
  "class": ["one-class", "another-class"],
  "name": "someName"
}); 

请注意，类有一个数组作为值。

结果将是:

<input id="myId" class="one-class another-class" name="someName">

这是jsfiddle .

<小时/>

编辑

为了更好地理解:在 JS 中，对象就像字典，即一堆键值对(以及原型(prototype)，但这对于本次讨论并不重要)。

如果您有一个带有 id 属性的对象，则可以使用以下语法之一访问它:

myObject.id   // object style
myObject["id"] // dictionary style

第二种语法非常有用，因为您可以使用变量来访问对象属性:

var attr = "id";
myObject[attr];

现在，我们还可以迭代对象，就像处理数组一样。唯一的区别是，对于数组，for in 语法返回索引，而对于对象，它返回key 或属性名称。

var myObject = { "id": 1, "name": "a name" }; // a basic object

for(var key in myObject) console.log(key, myObject[key]);
// will print 
// id 1
// name a name

如果您理解这两个机制，我给您的代码将会变得更加清晰。