Comunidad de diseño web y desarrollo en internet online

Javascript append elements jquery

Citar            
MensajeEscrito el 22 Abr 2014 01:57 am

@esneyder_a escribió:


Hola hoy vamos a aprender ha usar los. Arreglos de javascript de una manera distinta :vader: 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 :)

Por Esneyder Amin

2 de clabLevel



Genero:Masculino  

Esneyder,js,css3

chrome
Citar            
MensajeEscrito el 22 Abr 2014 04:45 pm
hola Esneyder Amin, realmente es dificil entender tus tutoriales. Trata de mejorar la redacción así te podemos entender mejor. También podés usar las etiquetas para postear los codigos.

Por Mariux

BOFH

7758 de clabLevel

28 tutoriales
15 articulos

Genero:Femenino   Héroes Editores

Diseñadora & ilustradora

chrome

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.