Scrivere il codice HTML è facile, ma quando si tratta di modifiche dinamiche su pagine come l'avvio di HTML, è necessario utilizzare strategie insolite. JavaScript è un linguaggio potente per fare questo tipo di lavoro. È possibile utilizzare facilmente JavaScript per mettere il codice HTML all'interno del modello. Ne discuteremo in questo articolo.

Attraverso JavaScript, ci sono due modi per allegare il codice HTML a un tag DIV.

• Utilizzo della proprietà InnerHTML
• Inserimento di HTML adiacente usando la funzione insertAdjacenthtml ()

Utilizzo dell'attributo InnerHTML

Per utilizzare la proprietà InnerHTML per allegare il codice a un elemento (div), selezionare prima l'elemento (div) in cui si desidera aggiungere il codice. Quindi, usando l'operatore += su InnerHTML, aggiungi il codice avvolto come stringhe.

Ecco la sintassi dell'attributo.

Htmlelement.InnerHtml += "Inserisci il tuo codice qui"

Facciamo un esempio di questo. Innanzitutto, ci riferiremo all'elemento HTML usando la proprietà:

documento.getElementById ();

Pertanto, creiamo a <Div> e metti un <H1> tag e a <pulsante> dentro.

Questo è un tutorial Linuxhint

Aggiungi paragrafo

Come puoi vedere, abbiamo dato un ID di "test" al div tagga e posiziona il testo che dice "Append paragrafo" all'interno del pulsante. Con questi, abbiamo il seguente risultato sullo schermo

Codice JavaScript:

Abbiamo un pulsante collegato a una funzione denominata "Buttonpressed ()" nello script. Ma non abbiamo definito questa funzione e questo pulsante non fa nulla. Quindi, creiamo questa funzione nello script che aggiungerebbe un paragrafo in questo div e contiamo quante volte abbiamo aggiunto questo paragrafo. Dai un'occhiata al seguente codice.

i = 1;
const bottonpressed = () =>
documento.getElementById ("test").InnerHtml +=
"

Yoo hai aggiunto questo paragrafo " + i +" tempi ";
I ++;

Nota: abbiamo creato una variabile contropiede "i". Questo verrà utilizzato per tenere un controllo su quante volte abbiamo aggiunto questo paragrafo all'interno del tag DIV.

Ora, se eseguiamo il codice e premi il pulsante che otteniamo:

Nota: Questa tecnica rimuove essenzialmente tutto il contenuto del Div e lo sostituisce con nuove cose. Eventuali ascoltatori collegati ai nodi minori di quel div andranno persi di conseguenza. Ecco perché lo concateniamo sempre.

Utilizzando il metodo adiacenthtml

La funzione insertAdjacenthtml () può anche essere utilizzata per allegare il codice HTML a un div. Questo metodo è utile quando si tratta di aggiungere HTML in un luogo specifico. Quindi ci vogliono due parametri in questo metodo:

• La posizione (nel documento) in cui il codice deve essere inserito ("afterbegin", "prima di ebegine", "afterend", "prima end").
  • Afterbegin - subito dopo l'elemento HTML menzionato ma all'interno del tag.
  • Prima di BEGIN - prima che l'elemento HTML menzionasse
  • AfterEnd - Dopo il tag di chiusura dell'elemento HTML
  • prima end - all'interno dell'elemento HTML ma prima del tag di chiusura
• È necessario circondare il codice HTML che si desidera aggiungere, all'interno delle citazioni.

Questa è la sintassi generale del metodo

Htmlelement.insertAdjacenthtml ('POSIZIONE',' Codice html ');

Usiamo l'esempio precedente. Lo stesso codice HTML. Tuttavia, questa volta la sceneggiatura sarebbe leggermente diversa come:

Codice HTML:

Questo è un tutorial Linuxhint

Aggiungi paragrafo

Nota: poiché stiamo usando l'esempio precedente, il codice HTML è esattamente lo stesso.

Codice JavaScript:

i = 1;
funzione pulsantepressed ()
documento.getElementById ("test").InsertAdjacenthtml ("prima di BEGN",
"

Times " + i +" aggiunto prima di div

");
I ++;

Nota: stiamo usando il “Prima di Begin"Proprietà per aggiungere il file

tag prima dell'inizio del div.

Produzione:

Ecco, hai imparato come possiamo aggiungere un codice HTML tramite JavaScript.

Conclusione

Esistono due metodi che è possibile utilizzare per aggiungere il codice HTML in una pagina Web. Il primo metodo è usando Innerhtml Mentre il secondo metodo è usando il Adiacenthtml metodo. In questo articolo, abbiamo preso esempi dei metodi InnerHTML e ADDACENTHTML per aggiungere il codice HTML in una pagina Web.