jQuery .Html vs .aggiungere

jQuery .Html vs .aggiungere
"jQuery"È una libreria JavaScript e".html ()" E ".aggiungere()"Entrambi sono i metodi utilizzati in jQuery. Entrambi i metodi eseguono attività diverse in una funzione JavaScript. IL ".Il metodo html () ”viene utilizzato per sostituire completamente il contenuto su un'interfaccia della pagina Web. D'altra parte, il ".Il metodo Append () "viene utilizzato per aggiungere nuovi contenuti alla fine del contenuto esistente senza modificare il contenuto precedente a differenza di".Metodo html () ".

Questo è come ".html () "e".i metodi Append () ”sono diversi l'uno dall'altro ed eseguono diverse operazioni JavaScript. Comprendiamo praticamente la differenza tra i due con l'aiuto di esempi.

Come usare il ".Metodo html () "?

Dovrebbe esserci un codice HTML per formattare prima il documento:

Questa è la prima riga


Questa è la seconda riga


  • Nello snippet di codice sopra, ci sono due classi denominate demo all'interno dei tag di paragrafo per aggiungere contenuto nella pagina web e sotto che esiste un pulsante denominato contenuto di modifica che verrà utilizzato per modificare il contenuto tramite il metodo HTML ().

Dovrebbe esserci una funzione JavaScript per implementare il ".html ()"Metodo per il corpo del documento sopra. Di seguito è un esempio di come il ".html ()"Il metodo è implementato in JavaScript:

$ (documento).pronto (function ()

$ ("pulsante").Click (function ()
$ (".Demo ").html ("Questo è il nuovo testo");
);
);
  • Nella funzione nidificata JavaScript sopra, esiste una funzione che ha il metodo pronto, In modo che, quando l'interfaccia HTML si carica sulla pagina Web, questa funzione diventa attiva.
  • All'interno della funzione, c'è il ".clic"Metodo per chiamare quella funzione con l'elemento"pulsante".
  • All'interno di ciò, c'è il contenuto scritto con ".html". Ciò significa che quando l'utente fa clic su "Cambia il contenuto"Pulsante, invocherà il".html ()Metodo "e questo contenuto (" questo è il nuovo testo ") scritto in".html ()"Il metodo sostituirà il vecchio contenuto.

L'interfaccia di output generata tramite il codice sopra sarà la seguente:

Ecco come il ".html ()"Il metodo funziona su un'interfaccia della pagina web.

Come usare il ".append () ”Metodo?

Ora vediamo come il ".aggiungere()"Il metodo è diverso e come funziona sulla pagina web. IL ".aggiungere()"Il metodo può aggiungere contenuto dopo il contenuto esistente sul lato destro del contenuto e anche sotto il contenuto. Quindi possiamo aggiungere pulsanti per entrambe le operazioni:

Ciao mondo!



  1. Prima linea

  2. Seconda linea

  3. Terza riga



  • Nello snippet di codice sopra, sono aggiunte tre righe per visualizzare sull'interfaccia della pagina Web come contenuto esistente della pagina web.
  • E poi, ci sono due pulsanti, uno per aggiungere il testo (per estendere il contenuto sul lato destro del testo) e l'altro per aggiungere l'elenco (per aggiungere contenuto sotto il contenuto esistente).

Per creare la funzione JavaScript per lo snippet di codice sopra, dovrebbe esserci ".aggiungere()Metodo "per entrambi i"Appendere il testo" E "Elenco di append"Pulsanti:

$ (documento).ready (function ()
$ ("#button1").Click (function ()
$ ("#a").aggiungere(" Appendere il testo");
);
$ ("#button2").Click (function ()
$ ("ol").aggiungere("
  • Elenco di append
  • ");
    );
    );
    • Nello snippet di codice sopra, c'è una funzione che viene fornita il metodo pronto per invocare la funzione quando viene caricata la pagina web.
    • All'interno della funzione, il ".aggiungere()"Il metodo viene utilizzato per entrambi i"Button1" E "Button2" elementi.

    Questo genererà il seguente output:

    Questa era la differenza tra ".html ()" E ".aggiungere()"Metodi di jQuery.

    Conclusione

    IL ".html ()" E ".aggiungere()"Entrambi sono metodi usati in"jQuery". Quando il "html ()"Viene utilizzato il metodo, sostituisce i vecchi contenuti con il nuovo contenuto aggiunto in"html ()" metodo. D'altra parte, quando il "aggiungere()"Viene utilizzato il metodo, aggiunge il contenuto dopo il contenuto esistente senza modificare o rimuovere il vecchio contenuto.