Hvordan legge til HTML -kode til en div ved hjelp av JavaScript?

Simen Stensrud
Hvordan legge til HTML -kode til en div ved hjelp av JavaScript?
Som vi alle vet at JavaScript er et skriptspråk som utfører forskjellige handlinger på et nettsted ved hjelp av HTML. Selv om vi bruker JavaScript hånd i hånd med HTML for å sikre at den fungerer ordentlig, gjør denne tingen koden komplisert for utvikleren som om personen vil legge noe til en div i HTML, han må gå til HTML-koden til Legg til eller oppdater endringene. La oss nå tenke at hvis det er noen sjanse for at personen ikke trenger å gå til HTML -kode for å legge til noe i det og vil gjøre det ved å bruke JavaScript, ville det ikke være mer praktisk?

I denne oppskrivningen vil vi fortelle deg det

  • Hvordan legge til HTML -kode til en div ved hjelp av JavaScript?
  • Hvordan legge til HTML -kode ved hjelp av InnerHTML?
  • Hvordan legge til HTML -kode ved hjelp av insertadjacenthtml?

Hvordan legge til HTML -kode til en div ved hjelp av JavaScript?

I JavaScript er det to måter å legge til HTML -kode til en div. Disse måtene er som følger

  • Legg ved å bruke indrehtml
  • Legg til ved å bruke InsertadJacenthtml

La oss prøve å forstå de to ovennevnte metodene for å legge til HTML til en div i JavaScript med riktige eksempler og forklaringer.

Hvordan legge til HTML -kode ved hjelp av InnerHTML?

Innerhtml -egenskapen brukes til å endre innholdet i en div eller en hvilken som helst HTML -tag. Det erstatter det eksisterende DIV -innholdet med det nye innholdet, men for å bruke denne egenskapen må en div tilordnes med en unik id og ID skal alltid være unik.

Kode:




Vedlegg


Prosess for å legge til HTML -kode ved hjelp av JavaScript





I denne koden oppretter vi et enkelt HTML -dokument som har en overskrifter og en tom div -tag med en unik ID Sjekk. Så bruker vi JavaScript Innerhtml -egenskap for å legge til HTML -kode inne i den tomme diven.

Produksjon:

Utgangen viser tydelig at vi legger til HTML Merk med litt innhold og styling inne i den tomme div -taggen ved hjelp av InnerHTML gjennom JavaScript.

Hvordan du legger ved å bruke insertadjacenthtml?

I JavaScript er InsertadJacenthtml en annen metode som brukes til å legge HTML -kode til en div gjennom JavaScript. Denne metoden tar 2 argumenter, det første argumentet spesifiserer innholdets plassering i en div, og det andre argumentet er den faktiske HTML -koden du vil legge til i en div.

Denne metoden bruker fire posisjoner for å legge til HTML -innholdet i en div:

  • Førbegin
  • på forhånd
  • etterbegin
  • Etter at det er

La oss gå gjennom alle disse stillingene en etter en.

Førbegin
I følgende kode vil denne attributtet plassere HTML -koden før Sjekk id div.

Kode:




Vedlegg


Prosess for å legge til HTML -kode ved hjelp av JavaScript



Dette avsnittet er skrevet for å demonstrere prosessen med å legge til HTML -kode i en div ved hjelp av JavaScript.





I denne koden lager vi et enkelt HTML -dokument med

Tag og a har unik ID Sjekk. Inne i denne diven er et avsnitt skrevet ved hjelp av

. Nå legger vi til HTML

Produksjon:

Utgangen viser tydelig det INSERTADJACENTHTML Metode legger til HTML -kode før den målrettede div fordi vi bruker dens førbegin -attributt for å plassere vår vedlagte HTML -kode.

på før
I følgende kode vil denne attributtet plassere HTML -koden inne i Sjekk id div men etter

Kode:




Vedlegg


Prosess for å legge til HTML -kode ved hjelp av JavaScript



Dette avsnittet er skrevet for å demonstrere prosessen med å legge til HTML -kode i en div ved hjelp av JavaScript.





I denne koden lager vi et enkelt HTML -dokument med

Tag og a har unik ID Sjekk. Inne i denne diven er et avsnitt skrevet ved hjelp av

. Nå legger vi til HTML

Produksjon:

Utgangen viser tydelig det INSERTADJACENTHTML Metoden legger til HTML -kode etter

etterbegin
I følgende kode vil denne attributtet plassere HTML -koden inne i Sjekk id div men like før

Kode:




Vedlegg


Prosess for å legge til HTML -kode ved hjelp av JavaScript



Dette avsnittet er skrevet for å demonstrere prosessen med å legge til HTML -kode i en div ved hjelp av JavaScript.





I denne koden lager vi et enkelt HTML -dokument med

Tag og a har unik ID Sjekk. Inne i denne diven er et avsnitt skrevet ved hjelp av

. Nå legger vi til HTML

Produksjon:

Utgangen viser tydelig det INSERTADJACENTHTML Metoden legger til HTML -kode inne i den målrettede div, men like før

Etter at det er
I følgende kode vil denne attributtet plassere HTML -koden etter Sjekk id div.

Kode:




Vedlegg


Prosess for å legge til HTML -kode ved hjelp av JavaScript



Dette avsnittet er skrevet for å demonstrere prosessen med å legge til HTML -kode i en div ved hjelp av JavaScript.





I denne koden lager vi et enkelt HTML -dokument med

Tag og a Å ha en unik ID Sjekk. Inne i denne diven er et avsnitt skrevet ved hjelp av

. Nå legger vi til HTML

Produksjon:

Utgangen viser tydelig det INSERTADJACENTHTML Metode legger til HTML -kode etter den målrettede DIV fordi vi bruker dens etterordning til å plassere vår vedlagte HTML -kode.

Konklusjon

I JavaScript kan vi legge til HTML -kode til en div ved hjelp av indrehtml og INSERTADJACENTHTML. InnerHTML legger til HTML -kode ved å erstatte det gjeldende innholdet i en DIV med nytt innhold, mens InsertadJacenthtml legger til HTML -kode ved å plassere, bruke førbegin, etterbegin, før og etter attributter. I denne artikkelen har vi lært om prosessen med å legge til HTML -kode til en div ved hjelp av JavaScript.

PHP
Hvordan du bruker mens du sløyfe i php?
Mens Loop er et avgjørende konsept som brukes til å utføre en kodeblokk gjentatte ganger til en spes...
Daniel Johnsen
PHP
Hvordan du bruker strlen -funksjon i php
Strlen () -funksjonen i PHP er en innebygd funksjon som brukes til å beregne lengden på en streng. L...
Simen Ødegård
Kraftskall
Hvordan fungerer kommandoen “Get-Process” i PowerShell
Cmdlet “Get-Process” i PowerShell får løpeprosessen på både eksterne og lokale datamaskiner. Det kan...
Simen Stensrud