domingo, 26 de diciembre de 2010

Funcion createElements() para JavaScript

Esta pequeña funcion que desarrolle para crear elementos HTML con javascript. Esta nos permite crear los elementos y añadirlo a cualquier lugar que especifiquemos de un documento ya sea por su id o enviandole el elemento que se desea agregar el nuevo elemento a crear, tambien puedes agregar atributos y contenidos a cada uno de los elementos creados .

//Funcion createElements Los elementos para crear se separan con comas (,) el contenido si deseas agregar uno diferente para cada elemento se separan con comar (,) y atributos se separan con / y entre el nombre del atributo y su valor se separan con igual (=). Si se desea atributos diferentes para cada elemento creado. Desarrollado por @jandres86
document.createElements = function(elemento,padre,contenido,atributos){
       
        Elements = new Array();
           
        if(typeof(elemento) != "undefined"){
            var ele = elemento.split(",");
            for(w=0;w<ele.length;w++){
                Elements.push(document.createElement(ele[w]));
               
                att(); //Ejecuta la funcion que agrega los atributos a los elementos
                content(); //Ejecuta la funcion que agrega los contenidos a los elementos creados
               
                agregarElementosAContenedor();
            }
        }else{
            alert("Es requerido el tipo de elemento a crear. Ejemplo: 'input','div','span','table'...");
        }
       
        //Agrega los elementos al padre especificado
        function agregarElementosAContenedor(){
            if(typeof(padre) != "undefined"){
                if(typeof(padre) == 'object'){
                    var pad = padre;
                }else {
                    var pad= document.getElementById(padre);
                }
               
                for(r=0;r<Elements.length;r++){
                    pad.appendChild(Elements[r]);
                }
            }else{
                alert("Es requerido el id donde se agregara el elemento creado.");
            }
        }
       
        //Funcion que agrega los atributos a los elementos creados como el atributo class el id, style y otros de los elementos
        function att(){
            if(typeof(atributos) != "undefined" && atributos != ''){
                atribut = atributos.split("//");
                //alert(atribut.length);
                if(atribut.length > 1){
                    for(q=0;q<atribut.length;q++){
                        var attrib = atribut[q].split("/");
                        for(x=0;x<attrib.length;x++){
                            alert(attrib[x]);
                            var att = attrib[x].split("=");
                            if(typeof att[0] == 'string'){
                                if(typeof(Elements[q]) == 'object'){
                                    Elements[q].setAttribute(att[0],att[1]);
                                }
                            }else{
                                alert("El atributo que dessea agregar debe ser de tipo texto");   
                            }
                        }
                    }
                }else{
                    var attrib = atributos.split("/");
                    for(x=0;x<attrib.length;x++){
                        var att = attrib[x].split("=");
                        for(j=0;j<Elements.length;j++){
                            if(typeof att[0] == 'string'){
                                Elements[j].setAttribute(att[0],att[1]);
                            }else{
                                alert("El atributo que dessea agregar debe ser de tipo texto");   
                            }
                        }
                    }
                }
            }
        }
       
        //Funcion que agrega el contenido ya sea un solo para todos los creados o diferentes para cada uno
        function content(){
            if(typeof(contenido) != "undefined"){
                cont = contenido.split(",");
                if(cont.length > 1){
                    for(d=0;d<Elements.length;d++){
                        Elements[d].innerHTML = cont[d];
                    }
                }else{
                    for(q=0;q<Elements.length;q++){
                        Elements[q].innerHTML = contenido;
                    }
                }
            }
        }
};


Forma de uso:

<script type='text/javascript'>
   
    document.createElements("table,div","cuerpo","Hola nuevo Elemento TABLE, Otro Contenido DIV","border=2/cellspacing=20//style=border:1px solid #999/id=hola");
   
</script>


"cuerpo", es el id de elemento donde se desea agregar los elementos creados.

Espero que les sirva como me ha servido a mi y me ha servido de maravilla para crear tablas y mostrar informacion traida de una base de datos mysql.

Cualquier duda por favor comenten y con gusto contestare todas sus preguntas. Y disculpen por la mala redaccion es mi primera publicacion hecha con mi trabajo.