@esneyder_a escribió:
Hola hoy vamos a aprender ha usar los. Arreglos de javascript de una manera distinta
para agregar elementos al DOM de html Exactamente a hacer es utilizar el objeto array y el objeto string para escribir codigo html en el main.js de tu web site de una forma mas natural y luego agregar lo con jquery donde requieras usarlo.
Primer paso:
definir las variables
Esta variable servirá para escribir el código html >> var model=[]
Segundo paso:
Comenzamos a escribir el codigo html dentro de la variable model, este caso yo creare una lista siguiendo la sintaxis de un array que es algo mas o menos asi:
var model=[
"<li>" ,
"Da me click",
"<span>Ola k Ase</span>",
"</li>",
].join();
Si te fijas bien notaras que antes de cerrar el arreglo utilice el metodo join() para unir y convertir el arreglo a un string
Tercer paso:
En el paso anterior utilizamos el método join() para unir todas las matrices del arreglo esto nos retorna un string asi :
<li> ,Da me click,<span>Ola k Ase</span>,</li>,
Tenemos que deshacernos de las " , " para que quede en texto html normal para eso usaremos el metodo replace asi:
var model=[
"<li>" ,
"Da me click",
"<span> Ola k Ase</span>",
"</li>",
].join().replace(/,/g,"");
de esta manera elimino todas las comas ahora ya estamos listos para agregarlo al DOM
asi:
$("body").append($(model));
La mayoría de las veces cuando queremos agregar codigo html con jquery lo hacemos por que necesitamos agregar información iterando entre los datos de alguna estructura de datos
hacerlo de esta manera tiene algunas ventajas por que nos permite tener mas claro el codigo html que escribimos, de otra forma tendríamos que hacer algo asi:
$("body").append($("<li> Da me click <span>Ola k Ase</span></li>"));
pero de esta forma se puede convertir en una pesadilla cuando tenemos codigo muy extenso que escribir
y como todo debe ser en una linea de codigo se vuelve una linea gigantesca
¿ Como hago para iterar entre datos y agregarlos ?
asi :
var datos=['uno','dos','tres']
for( i in datos ){
var model=[
"<li>" ,
"Da me click",
"<span> Ola k "+datos[i]+" Ase</span>",
"</li>",
].join().replace(/,/g,"");
$("body").append($(model));
};
es el mismo codigo , pero con un otro arreglo simulando una DB y en esta parte
"<span> Ola k "+datos[i]+" Ase</span>",
con el operadores + y las comillas doble " "+datos[i]+" concatenamos el valor del dato en la iteracion
