Javascript createElement函数

我在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);

---

这是最基本的例子4。。但是，如何使此功能在所有示例中更有效和可用？

我建议使用以下功能：

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">

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

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

现在，我们还可以迭代对象，就像我们对数组所做的那样。唯一的区别是，对于数组，in语法中的

for返回索引，而对于对象，它返回
键或属性名

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

如果您了解这两个Mecanic，我给您的代码将更加清晰。
我建议使用以下功能：

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">

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

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

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

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

如果您了解这两个Mecanic，我给您的代码会更清晰。
这看起来像我以前没有做过的任何事情，我会仔细看看您在这里做了什么，并尝试解决它。请不要在数组上使用
for in
。它会引起问题。无论哪种方式，都不需要循环来添加数组中的类<代码>元素.classList.add（…cls）
或者为了不使用transpiler支持旧浏览器：
element.classList.add.apply（element.classList，cls）
我试着让它尽可能简单（因为循环经常出现在第一节JS课程中），但我完全同意你的评论，并更新了我的答案。我对它的工作方式印象深刻，非常感谢。这将在未来对我非常方便：）书签和投票：）这看起来像是我以前没有做过的事情，我将仔细看看您在这里所做的工作，并尝试解决它。请不要在数组上使用
for in
。它会引起问题。无论哪种方式，都不需要循环来添加数组中的类<代码>元素.classList.add（…cls）
或者为了不使用transpiler支持旧浏览器：
element.classList.add.apply（element.classList，cls）
我试着让它尽可能简单（因为循环经常出现在第一节JS课程中），但我完全同意你的评论，并更新了我的答案。我对这种方式印象深刻，非常感谢。这将在未来对我非常方便：）书签和投票：）