Cómo utilizar DOM para llenar dinámicamente listas anidadas

El marco de JavaScript jQuery anexa nuevos datos en el DOM HTML. 

DINÁMICA POPULATE

El marco de JavaScript jQuery permite a los desarrolladores web para manipular el documento Modelo de objetos de HTML. El DOM comprende los elementos individuales de una página web. Usando jQuery, los desarrolladores web pueden añadir nuevos elementos DOM o partes de elementos DOM de su sitio web. Por ejemplo, un desarrollador Web puede optar por mejorar una lista de elementos DOM mediante la adición de elementos adicionales a la lista con el método. Prefijopara () jQuery.

Enlace con el framework jQuery. Por ejemplo, esta llamada a la API de Google incorporará una versión reciente de jQuery en su sitio web.

script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" / script

Escribe el código HTML con un contenedor de lista. Asignar el recipiente con una identidad o una clase. En este código de ejemplo, se ha creado una nueva lista. Este código de ejemplo crea un nuevo elemento de la lista, se encarga de la lista con la identidad de yourList y coloca la lista en un div padre con una identidad de parentDIV.

div id = "parentDIV"

ul id = "yourList"

/ Ul

/ Div

Rellenar la lista yourList elemento DOM con un nuevo elemento de la lista. Usted puede hacer esto mediante el uso de jQuery. Prefijopara () método. En el siguiente código de ejemplo jQuery, jQuery se ha llamado con el signo $ jQuery. El elemento de la lista "Este es un dinámico elemento de la lista poblada "se unirá a una lista con la identidad de yourList.

$ ('LiThis es una dinámica lista de elementos / li poblada ') Prefijopara (' # yourList. ')

Consejos y advertencias

También puede utilizar el método jQuery. AppendTo (). El método. Prefijopara () coloca el nuevo contenido al principio de la lista, mientras que el método DOM. AppendTo () colocará un nuevo contenido al final de la lista de DOM.

Una vez insertado dentro de las etiquetas HTML adecuadas, todo el código de ejemplo utilizado en este artículo debería aparecer de la siguiente manera:

! DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

HTML xmlns = "http://www.w3.org/1999/xhtml"

HTML

cabeza

script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" / script

/ Head

cuerpo

div id = "parentDIV"

ul id = "yourList"

/ Ul

/ Div

lenguaje de script type = "JavaScript" = "text / javascript"

$ ('LiThis es una lista de elementos / li dinámica de población ") Prefijopara (' # yourList. ')

/ Script

/ Cuerpo