jQuery - Manipolazione DOM

JQuery fornisce metodi per manipolare DOM in modo efficiente. Non è necessario scrivere un codice grande per modificare il valore dell'attributo di qualsiasi elemento o per estrarre il codice HTML da un paragrafo o una divisione.

JQuery fornisce metodi come .attr (), .html () e .val () che agiscono come getter, recuperando le informazioni dagli elementi DOM per un uso successivo.

Manipolazione dei contenuti

Il html( ) metodo ottiene il contenuto html (innerHTML) del primo elemento corrispondente.

Ecco la sintassi per il metodo:

selector.html( )

Esempio

Di seguito è riportato un esempio che utilizza i metodi .html () e .text (val). Qui .html () recupera il contenuto HTML dall'oggetto e quindi il metodo .text (val) imposta il valore dell'oggetto utilizzando il parametro passato -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               var content = $(this).html();
               $("#result").text( content );
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

Questo produrrà il seguente risultato:

Sostituzione dell'elemento DOM

Puoi sostituire un elemento DOM completo con gli elementi HTML o DOM specificati. IlreplaceWith( content ) il metodo serve molto bene a questo scopo.

Ecco la sintassi per il metodo:

selector.replaceWith( content )

Qui il contenuto è ciò che vuoi avere al posto dell'elemento originale. Potrebbe essere HTML o testo semplice.

Esempio

Di seguito è riportato un esempio che sostituirebbe l'elemento di divisione con "<h1> JQuery is Great </h1>" -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).replaceWith("<h1>JQuery is Great</h1>");
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

Questo produrrà il seguente risultato:

Rimozione di elementi DOM

Potrebbe verificarsi una situazione in cui desideri rimuovere uno o più elementi DOM dal documento. JQuery fornisce due metodi per gestire la situazione.

Il empty( ) metodo rimuove tutti i nodi figlio dall'insieme di elementi corrispondenti dove come metodo remove( expr ) rimuove tutti gli elementi corrispondenti dal DOM.

Ecco la sintassi per il metodo:

selector.remove( [ expr ])

or 

selector.empty( )

È possibile passare il parametro facoltativo expr per filtrare l'insieme di elementi da rimuovere.

Esempio

Di seguito è riportato un esempio in cui gli elementi vengono rimossi non appena vengono selezionati:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).remove( );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

Questo produrrà il seguente risultato:

Inserimento di elementi DOM

Potrebbe esserci una situazione in cui desideri inserire uno o più elementi DOM nel tuo documento esistente. JQuery fornisce vari metodi per inserire elementi in varie posizioni.

Il after( content ) metodo inserisce il contenuto dopo ciascuno degli elementi corrispondenti dove come metodo before( content ) il metodo inserisce il contenuto prima di ciascuno degli elementi corrispondenti.

Ecco la sintassi per il metodo:

selector.after( content )

or

selector.before( content )

Qui il contenuto è quello che vuoi inserire. Potrebbe essere HTML o semplice testo.

Esempio

Di seguito è riportato un esempio in cui gli elementi <div> vengono inseriti appena prima dell'elemento cliccato -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).before('<div class="div"></div>' );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

Questo produrrà il seguente risultato:

Metodi di manipolazione DOM

La seguente tabella elenca tutti i metodi che puoi usare per manipolare gli elementi DOM -

Sr.No. Metodo e descrizione
1 dopo (contenuto)

Inserisci il contenuto dopo ciascuno degli elementi corrispondenti.

2 append (contenuto)

Aggiungi contenuto all'interno di ogni elemento corrispondente.

3 appendTo (selettore)

Aggiungi tutti gli elementi corrispondenti a un altro insieme di elementi specificato.

4 prima (contenuto)

Inserisci il contenuto prima di ciascuno degli elementi corrispondenti.

5 clone (bool)

Clona elementi DOM abbinati e tutti i loro gestori di eventi e seleziona i cloni.

6 clone ()

Clona elementi DOM abbinati e seleziona i cloni.

7 vuoto( )

Rimuovi tutti i nodi figlio dal set di elementi corrispondenti.

8 html (val)

Imposta il contenuto html di ogni elemento corrispondente.

9 html ()

Ottieni i contenuti html (innerHTML) del primo elemento corrispondente.

10 insertAfter (selettore)

Inserisce tutti gli elementi corrispondenti dopo un altro insieme di elementi specificato.

11 insertBefore (selettore)

Inserire tutti gli elementi corrispondenti prima di un altro insieme di elementi specificato.

12 anteponi (contenuto)

Anteponi il contenuto all'interno di ogni elemento corrispondente.

13 prependTo (selettore)

Antepone tutti gli elementi corrispondenti a un altro insieme di elementi specificato.

14 rimuovere (expr)

Rimuove tutti gli elementi corrispondenti dal DOM.

15 replaceAll (selettore)

Sostituisce gli elementi corrispondenti dal selettore specificato con gli elementi corrispondenti.

16 replaceWith (contenuto)

Sostituisce tutti gli elementi corrispondenti con gli elementi HTML o DOM specificati.

17 testo (val)

Imposta il contenuto del testo di tutti gli elementi corrispondenti.

18 testo( )

Ottieni il contenuto di testo combinato di tutti gli elementi corrispondenti.

19 avvolgere (elem)

Avvolgi ogni elemento corrispondente con l'elemento specificato.

20 avvolgere (html)

Racchiudi ogni elemento corrispondente con il contenuto HTML specificato.

21 wrapAll (elem)

Avvolgi tutti gli elementi nel set abbinato in un unico elemento wrapper.

22 wrapAll (html)

Avvolgi tutti gli elementi nel set abbinato in un unico elemento wrapper.

23 wrapInner (elem)

Racchiudi il contenuto figlio interno di ogni elemento corrispondente (inclusi i nodi di testo) con un elemento DOM.

24 wrapInner (html)

Racchiudi il contenuto figlio interno di ogni elemento corrispondente (inclusi i nodi di testo) con una struttura HTML.