Qual è il metodo append() in JavaScript

Qual E Il Metodo Append In Javascript



Supponiamo di voler creare un elenco e aggiungere diversi elementi. Consuma una grande quantità di tempo in caso di farlo manualmente. Per fare ciò, JavaScript fornisce il ' aggiungere() ” metodo per prendere un oggetto come argomento e poi inserirlo alla fine dell'elenco definito. Inoltre, puoi anche aggiungere gli elementi in modo diverso, come nell'elenco o sotto forma di paragrafo.

Questo post ha dichiarato il metodo per trovare un ID oggetto in un array di oggetti JavaScript.

Qual è il metodo append() in JavaScript?

IL ' aggiungere() Il metodo ” in JavaScript viene utilizzato per inserire gli elementi o gli oggetti stringa alla fine dell'elemento. Questo è uno dei metodi più utili per aggiungere l'elemento richiesto nella posizione specificata alla fine dell'elemento.







Come utilizzare il metodo append() in JavaScript?

Per utilizzare la funzione append() in JavaScript, seguire la sintassi indicata di seguito:



( selettore ) . aggiungere ( contenuto, funzione ( indice, html ) )

Qui:



  • selettore ” è l'elemento HTML a cui si accede.
  • aggiungere() ” viene utilizzato per aggiungere l'elemento.
  • contenuto ” è il parametro obbligatorio, che determina il contenuto dei dati da aggiungere.
  • funzione() ” è un elemento facoltativo.

Esempio 1: aggiungi lo stesso elemento nel paragrafo

Per aggiungere gli stessi elementi in un paragrafo, per prima cosa apri la relativa pagina HTML e utilizza il '

” tag per incorporare i dati tra i tag. Inoltre, assegna un ' id ' al paragrafo per accedervi in ​​JavaScript:





< p id = 'elemento' > Benvenuti in Linuxhint P >

Quindi, crea un pulsante con l'aiuto del ' ” e usa l'elemento “ classe ” per specificare un nome particolare e incorporare il testo con l'elemento pulsante da visualizzare sul pulsante:

< pulsante classe = 'btn' > Aggiungi elemento pulsante >

Ora, utilizza il ' ” tag per aggiungere il codice JavaScript:



< copione >

$ ( documento ) . pronto ( funzione ( ) {

$ ( '.btn' ) . clic ( funzione ( ) {

$ ( '#elemento' ) . aggiungere ( 'Aggiungi testo al clic del pulsante' ) ;

} ) ;

} ) ;

copione >

Secondo il codice dato:

  • pronto() Il metodo ” viene utilizzato per rendere disponibile una funzione quando il documento viene caricato correttamente sullo schermo. Per farlo, passa il ' funzione() ” metodo come parametro.
  • clic() ” viene richiamato quando l'utente fa clic sull'elemento pulsante HTML. Questo metodo determina l'esecuzione del clic quando un utente preme il pulsante.
  • aggiungere() Il metodo ” inserisce un insieme di oggetti dopo l'esecuzione del metodo “ clic() ' metodo. A tale scopo, passa il testo che deve essere aggiunto.

Produzione

Esempio 2: aggiungere elementi diversi nel modulo elenco

Puoi aggiungere i diversi elementi sotto forma di un elenco. Per fare ciò, crea una pagina HTML e incorpora il testo con l'aiuto del '

etichetta ':

< p id = 'aggiungere' > Aggiungi JavaScript ( ) Funzione P >

Crea un pulsante usando il ' ” e usa l'elemento “ al clic ” evento che si verifica quando un utente fa clic su un elemento HTML:

< pulsante al clic = 'funzione()' > Aggiungi elementi pulsante >

Crea un contenitore div e assegna un ID a quel contenitore utilizzando ' id 'attributo. Quindi, aggiungi gli elementi con l'aiuto del '

etichetta ':

< ID div = 'più-elemento' >

< P > Elemento 1 P >

< P > Elemento 2 P >

div >

Successivamente, ha utilizzato il ' ” tag e aggiungi il seguente codice tra i tag:

< copione >

var NumeroElemento = 3 ;

funzione funzione ( ) {

era un genitore = documento. getElementById ( 'più elemento' ) ;

era newElement = '

Elemento' + Numero elemento + '

'
;

genitore. insertAdjacentHTML ( 'prima della fine' , ed Elemento ) ;

Numero elemento ++;

}

copione >

Nel codice sopra indicato:

  • Dichiara una variabile usando il ' era ” parola chiave e assegnale un valore in base alle tue preferenze.
  • Definire una funzione e inizializzare un'altra variabile all'interno della funzione definita con un nome particolare.
  • Quindi, invocare il ' getElementById() ” Metodo JavaScript per accedere all'elemento e passare il valore id come parametro.
  • insertAdiacenteHTML() Il metodo ” viene utilizzato per aggiungere il codice HTML in una posizione specificata e aggiungere l'elemento adiacente l'uno all'altro.
  • Utilizzare l'operatore di incremento per eseguire un incremento nell'elemento:

Hai imparato l'uso del metodo append() in JavaScript con vari esempi.

Conclusione

aggiungere() ” è un metodo JavaScript utilizzato per inserire l'elemento e gli oggetti alla fine dell'elemento definito. Puoi aggiungere lo stesso elemento e diversi elementi sotto forma di paragrafi ed elenchi. Più specificamente, può essere attivato con un clic del pulsante. Questo post ha dimostrato il metodo append() in JavaScript.