的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); 
} 

這是bascially例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" 
}); 

請注意，class有一個數組作爲值。

結果將是：

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

這裏是jsfiddle。

---

編輯

爲了更好地理解：在JS，對象是像字典，即一串鍵值對（和prototypes，但這不是重要的討論）。

如果你有一個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 

如果你明白了這兩個機制，我給你的代碼將會變得更加清晰。