Javascript-Funktion create

Question

Ich habe einige Code, der in den main.js repliziert Datei

Javascript Beispiele Duplikate:

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

Wie Sie die Beispiele sehen können, das gleiche tun, die ein Element schafft, aber es sind mehrere Parameter, die sich von Beispiel zu Beispiel unterscheiden. Wie mache ich eine Funktion, die ich für alle verwenden kann? jetzt ich nur wissen, wie man wie so für genau ein konkretes Beispiel bauen ->

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

Dieses bascially Beispiel ist 4 .. aber wie mache ich dies effizienter und nutzbar auf allen Beispielen?

Answer 1

würde ich vorschlagen, die folgende Funktion:

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

Die Funktion nimmt einen Typen (input, img, usw.) und eine Liste von Attributen (das heißt ein Objekt/Wörterbuch). Wir durchlaufen die Attribute und fügen sie dem neuen Element hinzu. Der einzige spezielle Fall ist mit Klassen, mit einer anderen Syntax (und wir können mehrere Klassen haben). Hier ist, wie Sie es verwenden können:

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

Beachten Sie, dass die class ein Array als Wert hat.

wird das Ergebnis sein:

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

Hier die jsfiddle ist.

---

EDIT

Um besser zu verstehen: in JS, Objekte wie Wörterbücher sind, das heißt eine Reihe von Schlüssel-Wert-Paaren (und prototypes, aber dies ist für diese Diskussion nicht wichtig).

Wenn Sie ein Objekt mit einem id Attribute haben, können Sie es zu einem der folgenden Syntax zugreifen:

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

Die zweite Syntax ist sehr nützlich, da Sie Variablen verwenden Objekt zuzugreifen Attribute:

Jetzt können wir auch über ein Objekt iterieren, wie wir es mit Arrays tun. Der einzige Unterschied besteht darin, dass bei Arrays die for in-Syntax den Index zurückgibt, während bei Objekten der Wert key oder der Eigenschaftsname zurückgegeben wird.

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 

Wenn Sie diese beiden mecanics verstehen, der Code Ich habe werden Sie viel klarer bekommen.