JavaScript - crear elemento y establecer atributos

Question

Tengo estas funciones para crear elementos y cambiar sus atributos. ¿Podría darme un consejo sobre cómo modificarlos?

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

quiero conseguir algo como esto crear ('div', { 'id': 'test', 'clase': 'Smth'});

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

}

Por favor ayuda =]

Answer 1

recomendaría un marco de JavaScript como jQuery. Ellos ya tienen esta funcionalidad implementada.

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

Answer 2

No se puede iterar a través de un objeto de esa manera:

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

Tenga en cuenta que he cambiado la variable "attr" a "attrs" para que no oculta la función "attr" tu has creado Además, en su función de "attr", cambiar la prueba "indefinido":

if (typeof value !== undefined) 

a ser un poco más seguro. Las comparaciones con "==" y "! =" Intentan una conversión de tipo, que es innecesaria si solo está marcando undefined.

Answer 3

Un consejo: personalmente prefiero el modo jquery porque puede agregar los css y los eventos al elemento directamente, y hacer referencia a los objetos por un nombre var en lugar de la identificación, pero ... Hay problemas al usar este método para crear elementos de entrada, es decir, 7 & ie8 no le permiten establecer la propiedad de tipo, así que tenga cuidado al crear un botón, cuadro de texto, etc. por ejemplo, jquery lanzará un error de "la propiedad de tipo no se puede cambiar".

Si el código se va a utilizar en un navegador antes de ie9, mejor uso: document.createElement en su lugar para aumentar la compatibilidad.