Manipolare gli elementi HTML in jQuery

Manipolare gli elementi permette di modificare  ed estendere il set di elementi scelti con l'aggiunta di nuovi contenuti o rimuovere elementi dal set. Per manipolare gli elementi abbiamo bisogno prima di tutto selezionarli con selettore o metodi di selezione.

Modificare gli contenuti o attributi di elementi

Prima di tutto dobbiamo capire e tenere conto che jQuery fa la differenza fra il tag della nostra pagina che creano la struttura di DOM (diciamo albero della nostra pagina) e il testo in esso continente come per esempio posiamo scegliere un paragrafo per la modifica con jQuery ma nello stesso tempo dobbiamo precisare che vogliamo modificare o il  tag che crea questo paragrafo o il contenuto racchiuso nel tag del paragrafo e per questi due mosse jQuery utilizzare due metodi diversi per selezionare

1. Aggiungere  un contenuto sulla pagina

1.1. Metodo .html ()

Dopo la selezione e modifica ritorna il codice HTML(gli tag ) modificato o aggiunge dei  html tag  nuovi per elementi selezionati.

.html()
il metodo viene indicato senza nessun parametro fra le parentesi. Ritorna contenuto del PRIMO elemento del set selezionato in forma di struttura  html. In parole semplici non cambia la struttura del DOM ma posiamo dire semplicemente seleziona e ritorna cosi come era.
.html(htmlString)
aggiunge un frammento una stringa del codice  HTML per  gli elementi della serie scelta.
.html( function )
Sostituisce l'html (non il testo per esempio di un paragrafo! ma elementi(tag o attributo del tag ) del linguagio html )contenuto di ogni elemento selezionato del  set per il valore restituito dalla funzione inserita fra le parentesi. La funzione viene applicata ad ognuno degli elementi selezionati.

1.2 Metodo .text()

Restituisce il contenuto testuale (senza varie tag, solo il testo) di tutti gli elementi del set selezionato, compreso i loro figli, o aggiunge un nuovo contenuto di testo.

.text()
Ottiene il testo dell'elemento selezionato. Se ci sono più elementi, ricevera il contenuto di tutti gli elementi, separati da uno spazio
.text( stringa di semplice testo  )
Sostituisce il testo del elemento selezionato dal testo inserito fra le parentesi
.text( function (index, text) )

Esso sostituisce il contenuto di ogni elemento selezionato nel set, dal contenuto restituito dalla funzione. La funzione viene chiamata per ognuno degli elementi selezionati. Parametri di funzione:

index - la posizione dell'elemento nel set selezionato,

value – testo corrente del elemento.

Vediamo un esempio del ultimo metodo.

 Sostituire il testo originario contenuto in tag div con utilizzo della funzione .text(function), che restituisce i primi 20 caratteri del del testo contenuto nei div, e includere questo testo in un paragrafo, la stringa risultante ritornerà e sostituira l'originale:
html:

<style>
  body{
      line-height: 100%;
  }
  div{
      margin-bottom: 20px; padding: 5px; border: solid 1px #ccc;
  }
</style>
<div class="example">Ciao! io sono<strong>elemento div</strong>del esempio . Contengo un saco di testo di vario tipo come , <p>paragrafo</p>, <h4>titoli h4</h4>, <strong>testo in grasetto</strong>, <a href="#">e collegamenti</a>
</div>
<div class="example">Ciao! io sono <strong>il secondo div </strong>del esempio. Anche io posiedo tanto testo di varia natura</a>
</div>  
<button >Scegliere I primi 20 simboli dal testo di ogni <strong>div</strong></button>

JS:
$(function (){ 
    $('button').click(function(){//vediamo di usare funzione .clic per mostrare funzionamento del metodo .text(function) 
       $('.example').text(function(index, text){//selezioniamo div con la classe .example e appliciamo il metodo .text 
                text = text.substr(0,20);//scegliere I primi 20 simboli
           return text; // e ritornare questo testo sostituendo l'originario
       });
    });
});

Ciao! io sono il primo div su questa pagina. Contengo un saco di testo di vario tipo come ,

paragrafo

,

titoli h4

, testo in grasetto, e collegamenti
Ciao! io sono il secondo div su questa pagina. Anche io posiedo tanto testo di varia natura

2. Aggiungere elementi

2.1. Metodo .append ()

Aggiunge  il contenuto indicato fra le parentesi del metodo alla fine di ogni elemento scelto  dopo il suo contenuto esistente. Il nuovo set conterrà il contenuto originale e quello aggiunto .

.append(content [, content])
contenuto 1 - come contenuto viene aggiunto un elemento HTML una matrice, una stringa, o un oggetto jQuery.
contenuto2 - parametro opzionale specifica il contenuto aggiuntivo che agiunge  uno o più elementi HTML, array, stringe o oggetti jQuery.
.append(function)
function – viene aggiunta per ogni elemento dell'insieme, alla funzione vengono trasmessi  due argomenti - l'indice dell'elemento selezionato  e il suo contenuto corrente. La funzione restituisce una stringa, elemento DOM o un oggetto jQuery. Il valore di ritorno sarà usato come contenuto aggiuntivo  al contenuto esistente dell'elemento selezionato.

Esempio

html

<p class="esempio3">Io sono la prima parte della frase </p>

JS

$(function(){
    $(".link").click(function() {
        $('.esempio3').append(" e io sono la seconda parte e sono stata aggiunta da jQuery");
    });
});

Io sono la prima parte della frase

Clica per agiungere seconda parte della frase

2.2. Metodo .appendTo( target )

Il metodo è l'analogo di append () con la differenza che aggiunge tutti gli elementi selezionati al interno di un altro insieme di elementi dopo il contenuto esistente.

.appendTo
target - l'elemento, in quale saranno inseriti gli elementi selezionati.

Esempio. Inizialmente, abbiamo un paragrafo , ma non appena si preme il pulsante, questo paragrafo verrà aggiunto all'interno di un div, e nello stesso tempo sara ritagliato dalla sua posizione di prima. Per mostrare meglio, il paragrafo all'interno del div diventerà rosso e sara in grassetto:

Ciao! io sono l'elemento div su questa pagina. Non vedo l'ora che tu facia clic sul pulsante qui sotto per selezionare il paragrafo,che mi segua, e aggiungerlo al inteno della scatola..

Ciao, io sono proprio questo paragrafo!

HTML

<div >Ciao! io sono <strong>l'elemento div </strong> su questa pagina. Non vedo l'ora che tu facia clic sul pulsante qui sotto per selezionare il paragrafo,che mi segua, e aggiungerlo alla fine..
</div>
<p class="prova_2">Ciao io sono proprio questo paragrafo!</p>
<button >Io sono il bottone!</button>

JQuery

<script>
 $(function(){
$('button').click(function(){
$('.prova_2').appendTo('div');
});
});
 </script>

Letto 889 volte