Come sapete, JavaScript è un linguaggio di scripting dinamico. Per fornire funzionalità dinamiche alle pagine Web, il codice HTML può essere scritto utilizzando elementi HTML in JavaScript e gli attributi CSS possono essere utilizzati in combinazione con elementi HTML in JavaScript per personalizzare la tua pagina web. JavaScript "createElement ()"Il metodo consente di creare elementi HTML e"Innerhtml"La proprietà ti consente di scrivere contenuti per le pagine Web.

Questo tutorial descriverà i metodi per scrivere il codice HTML in modo dinamico usando JavaScript.

Come scrivere il codice HTML in modo dinamico usando JavaScript?

Per scrivere il codice HTML usando JavaScript, utilizzare i seguenti metodi:

• Utilizzo del documento.metodo createElement ()
• Proprietà InnerHTML

Metodo 1: scrivere il codice HTML in modo dinamico usando il documento.metodo createElement ()

JavaScript "documento.createElement ()Metodo "con il"TextContent"La proprietà viene utilizzata per scrivere un codice HTML in JavaScript dinamicamente. Utilizzando il metodo createElement (), è possibile creare un determinato elemento HTML e la proprietà TextContent viene utilizzata per impostare il contenuto di testo.

Sintassi

Usa la sintassi data per creare un elemento HTML in JavaScript:

documento.CreateElement ('TagName')

Esempio

Qui, in primo luogo, creeremo un paragrafo in un file JavaScript utilizzando HTML

tag passato in "createElement ()" metodo:

const text = document.createElement ('p');

Utilizzare la proprietà TextContent per impostare il testo in un paragrafo:

testo.textContent = "Welcome to LinuxHint";

Infine, stampano il testo sulla pagina web usando "documento.scrivere()" metodo:

documento.Scrivi (testo.textcontent);

Qui, puoi vedere nell'output scriviamo correttamente il testo sulla pagina Web usando JavaScript:

Metodo 2: scrivere il codice HTML in modo dinamico utilizzando la proprietà InnerHTML

Per scrivere in modo dinamico il codice HTML, usa JavaScript "Innerhtml" proprietà. È l'approccio più semplice per modificare il contenuto di un elemento HTML. Supporta tutti i browser.

Sintassi

Segui la sintassi data per utilizzare la proprietà InnerHTML:

InnerHtml = "Testo"

Esempio

Nel file HTML, prima, crea un pulsante che chiamerà la funzione definita "intestazione()"In JavaScript sull'evento click:

clicca qui

Crea un paragrafo utilizzando

Tag in cui il testo verrà visualizzato da JavaScript e assegnerà un ID ad esso:

Definire una funzione "intestazione()"In un file JavaScript. Ottieni il riferimento dell'elemento HTML usando l'ID assegnato con l'aiuto di "getElementById ()Metodo "e applicare un"Innerhtml"Proprietà su di esso:

funzione function ()
documento.getElementById ('Heading').InnerHtml = "

Benvenuti in Linuxhint

";

Produzione

Abbiamo compilato tutte le informazioni essenziali relative alla scrittura del codice HTML in modo dinamico usando JavaScript.

Conclusione

Per scrivere il codice HTML in modo dinamico in JavaScript, usa "documento.createElement ()Metodo "con il"TextContent"Proprietà o"Innerhtml" proprietà. Nel primo metodo, non è necessario alcun codice HTML, mentre nella proprietà InnerHTML, è necessario accedere all'elemento HTML ed eseguire un'operazione su di esso. In questo tutorial, abbiamo descritto i metodi per scrivere il codice HTML usando JavaScript dinamicamente.