JavaScript - tworzenie elementów i ustawianie atrybutów

Question

Mam te funkcje do tworzenia elementów i zmiany ich atrybutów. Czy możesz udzielić mi porady, jak je zmodyfikować?

function create(elem) { 
return document.createElementNS ? document.createElementNS("http://www.w3.org/1999/ xhtml", elem) : document.createElement(elem); 
} 

function attr(elem, name, value) { 
if (!name || name.constructor != String) return ""; 
name = {"for": "htmlFor", "class": "className"}[name] || name; 
if (typeof value != "undefined") { 
    elem[name] = value; 
    if (elem.setAttribute) elem.setAttribute(name, value); 
} 
return elem[name] || elem.getAttribute(name) || ""; 
} 

chcę dostać coś takiego tworzyć ('div', { 'id': 'test', 'klasy': 'czymś'});

function create(elem, attr) { 
if (!attr) return document.createElementNS ? document.createElementNS("http://www.w3.org/1999/xhtml", elem) : document.createElement(elem); 
if (attr) { 
    var el = document.createElementNS ? document.createElementNS("http://www.w3.org/1999/xhtml", elem) : document.createElement(elem); 
    for (var i = 0; i < attr.length; i++) { 
    attr(el, name[i], value[i]); 
    } 
    return el; 
} 

}

Proszę o pomoc =]

Answer 1

Polecam javascript ramy jak jQuery. Już mają tę funkcjonalność zaimplementowaną.

$("<div/>", { 
    "class": "test", 
    text: "Click me!", 
    click: function(){ 
     $(this).toggleClass("test"); 
    } 
}).appendTo("body"); 

Answer 2

Nie możesz iterację obiektu tak:

for (var k in attrs) { 
    if (attr.hasOwnProperty(k)) 
    attr(el, k, attrs[k]); 
} 

pamiętać, że zmieniłeś „w ciekawy” zmienną „attrs” tak, że nie ukrywa funkcję „w ciekawy” stworzyłeś. Również w funkcji "attr" zmień "niezdefiniowany" test:

if (typeof value !== undefined) 

być trochę bezpieczniejszym. Porównania z "==" i "! =" Powodują próbę konwersji typu, co nie jest konieczne, jeśli po prostu sprawdzasz undefined.

Answer 3

Słowo porady: Osobiście preferuję sposób jquery, ponieważ można dodać css i zdarzenia bezpośrednio do elementu i odwoływać się do obiektów według nazwy zmiennej zamiast id, ale ... Występują problemy podczas korzystania ta metoda tworzenia elementów wejściowych, np. & ie8, nie pozwala na ustawienie właściwości type, więc uważaj podczas tworzenia przycisku, pola tekstowego, itp. na przykład, jquery rzuci błąd typu "nie można zmienić właściwości".

Jeśli kod ma być używany w przeglądarce przed wersją 9, najlepiej użyj: document.createElement zamiast tego, aby zwiększyć kompatybilność.