Come usare DOM per popolare dinamicamente liste annidate

December 14

Come usare DOM per popolare dinamicamente liste annidate


Il framework jQuery JavaScript permette agli sviluppatori web di manipolare Document Object Model di HTML. Il DOM comprende i singoli elementi di un sito web. Utilizzando jQuery, gli sviluppatori Web possono aggiungere nuovi elementi DOM o parti di elementi da DOM del loro sito web. Ad esempio, uno sviluppatore Web può scegliere di valorizzare un elemento DOM lista con l'aggiunta di elementi aggiuntivi alla lista con il metodo jQuery .prependTo ().

istruzione

1 Link alla framework jQuery. Ad esempio, questa chiamata per l'API di Google incorporerà una versione recente di jQuery nel tuo sito web.

<Script sarà allegato ad una lista con l'identità di yourList.

$ ( '<Li> Questo è un elemento della lista popolato dinamicamente </ li>') prependTo ( '# yourList.');

Consigli e avvertenze

  • È inoltre possibile utilizzare il metodo di jQuery .appendTo (). Il metodo .prependTo () pone nuovi contenuti all'inizio della lista DOM mentre il metodo .appendTo () porrà nuovi contenuti alla fine dell'elenco DOM.
  • Una volta inserito all'interno dei tag HTML corretto, l'intero codice di esempio utilizzato in questo articolo dovrebbe apparire come segue:
  • <! 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>
  • <Head>
  • <Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> </ script>
  • </ Head>
  • <Body>
  • <Div id = "parentDIV">
  • <Ul id = "yourList">
  • </ Ul>
  • </ Div>
  • <Script language = tipo "JavaScript" = "text / javascript">
  • $ ( '<Li> Questo è un elemento della lista popolato dinamicamente </ li>') prependTo ( '# yourList.');
  • </ Script>
  • </ Body>