Å skrive HTML -kode er enkelt, men når det gjelder dynamiske endringer over sidene som å legge til HTML, må du bruke uvanlige strategier. JavaScript er et kraftig språk for å få gjort slike typer jobber. Du kan enkelt bruke JavaScript for å sette HTML -koden inne i malen. Vi vil diskutere dette i denne oppskrivningen.

Gjennom JavaScript er det to måter å knytte HTML -kode til en div -tag.

• Ved hjelp av InnerHTML -eiendom
• Sette inn tilstøtende HTML ved hjelp av INSERTADJACENTHTML () -funksjonen

Bruke InnerHTML -attributt

For å bruke InnerHTML -egenskapen for å knytte kode til et element (DIV), velg først elementet (DIV) der du ønsker å legge til koden. Deretter bruker du += operatøren på InnerHTML, legg til koden pakket inn som strenger.

Her er syntaksen til attributtet.

Htmlelement.INNERHTML += "Sett inn koden din her"

La oss ta et eksempel på dette. Først skal vi referere til HTML -elementet ved å bruke eiendommen:

dokument.getElementById ();

La oss derfor skape en <div> og legg en <H1> Tag og a <knapp> inni det.

Dette er en Linuxhint -opplæring

Legg til avsnitt

Som du ser har vi gitt en ID om "test" til div Merk og plassert teksten som sier “Legg til avsnitt” inne i knappen. Med disse har vi følgende resultat på skjermen

JavaScript -kode:

Vi har en knapp lenket til en funksjon som heter “ButtonPricted ()” i skriptet. Men vi har ikke definert denne funksjonen, og denne knappen gjør ikke noe. Så la oss opprette denne funksjonen i skriptet som vil legge til et avsnitt i denne diven og telle hvor mange ganger vi har lagt til dette avsnittet. Ta en titt på følgende kode.

i = 1;
const buttonpressed = () =>
dokument.getElementById ("Test").indrehtml +=
""

Yoo har lagt til dette avsnittet " + i +" Times ";
i ++;

Merk: Vi har laget en motvariabel “Jeg”. Dette vil bli brukt til å sjekke hvor mange ganger vi legger til dette avsnittet i Div -taggen.

Nå, hvis vi kjører koden og trykker på knappen, får vi:

Merk: Denne teknikken fjerner i hovedsak alt av divens innhold og erstatter det med nye ting. Eventuelle lyttere knyttet til barneknuter av den diven vil gå tapt som et resultat. Det er grunnen til at vi alltid sammenkobler det.

Ved hjelp av ANDOCENTHTML -metoden

InsertadJacenthtml () -funksjonen kan også brukes til å knytte HTML -kode til en div. Denne metoden kommer til nytte når det gjelder å legge til HTML på et bestemt sted. Så det tar to parametere i denne metoden:

• Plasseringen (i dokumentet) der koden skal settes inn ('Afterbegin', 'BeforeBegin', 'etterend', 'før')).
  • Afterbegin - Rett etter HTML -elementet som er nevnt, men inne i taggen.
  • BeforeBegin - Før HTML -elementet nevnt
  • Etter endt - etter den avsluttende taggen til HTML -elementet
  • før - inne i HTML -elementet, men før lukkingsmerke
• Du må omgi HTML -koden du ønsker å legge til, inne i sitatene.

Dette er den generelle syntaksen til metoden

Htmlelement.INSERTADJACENTHTML ('PLASSERING',' Html kode ');

La oss bruke det forrige eksemplet. Den samme HTML -koden. Denne gangen ville manuset imidlertid være lite annerledes som:

HTML -kode:

Dette er en Linuxhint -opplæring

Legg til avsnitt

Merk: Siden vi bruker forrige eksempel, er HTML -koden nøyaktig den samme.

JavaScript -kode:

i = 1;
funksjon buttonpressed ()
dokument.getElementById ("Test").INSERTADJACENTHTML ("BeforeBegin",
""

Vedlagt " + i +" tider før div

");
i ++;

Merk: Vi bruker “Førbegin”Eiendom for å legge til

tagg før starten av div.

Produksjon:

Det er det, du har lært hvordan vi kan legge til litt HTML -kode gjennom JavaScript.

Konklusjon

Det er to metoder som du kan bruke til å legge HTML -koden til en webside. Den første metoden er ved å bruke indrehtml Mens den andre metoden er ved å bruke Tilstøtendehtml metode. I denne artikkelen har vi tatt eksempler på både InnerHTML og tilstøtende metoder for å legge HTML -koden til en webside.