Inserimento di html in un div - javascript

In molti casi, è necessario aggiungere dati in modo dinamico sui siti Web, ad esempio forum di social media, negozi online, siti Web di notizie, dashboard e così via. Più specificamente, qualsiasi sito Web che visualizza i dati di modifica o contenuto può richiedere aggiornamenti dinamici utilizzando JavaScript o altri strumenti di sviluppo Web.

Questo articolo descriverà come inserire un HTML in un elemento Div in JavaScript.

Come inserire HTML in un div usando javascript?

Poiché JavaScript è un linguaggio dinamico e viene utilizzato dinamicamente. Quindi, a questo scopo, usa gli attributi predefiniti JavaScript. Per inserire un HTML in un div, utilizzare i seguenti approcci:

• Proprietà InnerHTML
• Proprietà del centro

Metodo 1: inserire HTML in un div usando la proprietà "InnerHTML"

Usa il "Innerhtml"Proprietà per l'inserimento dell'HTML in un div. Può recuperare il contenuto HTML di un elemento come stringa o impostare un nuovo contenuto HTML per un elemento, inclusi TEX o TAG HTML.

Sintassi

Usa la sintassi data per la proprietà InnerHTML per aggiungere HTML in un div in javascript:

elemento.Innerhtml

Esempio

Crea un div in un elemento HTML usando tag e associare un ID "InsertText"

In un file JavaScript o il tag, ottieni il riferimento dell'elemento Div usando l'ID assegnato e usa il “Innerhtml"Attributo per impostare il testo con il collegamento di ancoraggio:

documento.getElementById ("InsertText").InnerHtml = "Welcome to LinuxHint";

Come puoi vedere che il testo con il collegamento è stato inserito correttamente sulla pagina usando JavaScript:

Metodo 2: inserire HTML in un div usando la proprietà "InnerText"

Un altro modo per inserire HTML in un div è usare il "testo interno" proprietà. Può ottenere/recuperare il contenuto di testo dell'elemento HTML o impostare un nuovo contenuto di testo per un elemento HTML.

Sintassi

Utilizzare la seguente sintassi per la proprietà InnerText:

elemento.testo interno

Esempio

Qui, aggiungeremo il testo nell'elemento Div usando l'attributo di Innertext:

documento.getElementById ("InsertText").InnerText = "Hy! Sto inserendo in questo div usando la proprietà "Innertext" ";

Produzione

Si tratta di inserire HTML in un div usando javascript.

Conclusione

Per inserire tag HTML e testo in un elemento HTML Div, utilizzare il “Innerhtml"Proprietà e per inserire solo il testo sull'elemento Div, usa il"testo interno" proprietà. Questo articolo ha descritto i modi per inserire un HTML in un div usando JavaScript.