Lunedì, 26 Novembre 2018 17:22

Esempio 07 - Aggiungere elementi/tag html

Scritto da

L'ultimo argomento di interesse per questo minicorso sulle jquery: modificare dinamicamente le nostre pagine web con jquery aggiungendo frammenti di testo. Due esempi molto semplici con un paragrafo ed una lista. 

Si potrebbero ricavare una infinità di esercizi ed esempi: in base ad un input numerico, aggiungere un  corrispondete numeri di oggetti in una lista o creare una tabella in base al quantitativo di righe e colonne fornite con un prompt piuttosto che una form.

<!DOCTYPE html>
<html lang="it">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#bottone1").click(function(){
        $("p").append(" <b>Appended text</b>.");
    });

    $("#bottone2").click(function(){
        $("ol").append("<li>Appended item</li>");
    });
});
</script>
</head>
<body>

<p>Un testo qualsiasi</p>
<p>Un altro paragrafo con testo qualsiasi</p>

<ul>
  <li>Oggetto 1</li>
  <li>Oggetto 2</li>
</ul>

<input type="button" id="bottone1" value="Aggiungi testo">
<input type="button" id="bottone2" value="Aggiungi alla lista">

</body>
</html>
Letto 486 volte
Prof. Alfredo Centinaro

Docente di "Scienze e tecnologie informatiche", "Tecnologie e progettazione di sistemi informatici", "Sistemi e Reti" presso IIS Alessandrini-Marino (Teramo), consulente e sviluppatore web. Ha collaborato per anni come sviluppatore presso MHT (ora Engineering 365), assistente Sistemi ed elaborazione dell'informazione in UniTE Corso di laurea in Scienze del turismo culturale, tutor presso Telecom Italia Learning Services (L'Aquila)