Legg til HTML til containerelement uten indre HTML

Noen ganger må utvikleren legge til forskjellige elementer i beholderen for forskjellige formål. Videre kan det være lurt å legge til containerelementene som hovedsakelig brukes til å legge til data i en fil. I en slik situasjon kan du legge til tegn, boolske, strenger, heltall og flyter, til dataene i et program som bruker JavaScript.

Dette innlegget vil forklare for å legge et element til et containerelement uten indre HTML.

Legg til HTML til containerelement uten indre HTML

For å legge til HTML -beholderelementet uten indre HTML, “dokument.getElementById ()”Og“INSERTADJACENTHTML ()”JavaScript -metoder brukes.

Følg den uttalte prosedyren for praktisk demonstrasjon.

Trinn 1: Lag en "div" -beholder

Opprinnelig lage en "div" -beholder ved å bruke "”Element og sett inn et klasseattributt i div åpningskoden.

Trinn 2: Lag en knapp

Bruk deretter “”Tag for å opprette en knapp og legge til følgende attributt inne:

• “type”Angir typen element. For det formålet settes verdien av denne attributtet som "sende inn”.
• “ved trykk”Handler lar brukeren ringe en funksjon og utføre en handling når et element/knapp klikkes. Verdien av "OnClick" er satt som "AddElement ()”.
• “AddElement ()”Funksjon brukes med det formål å legge til et bestemt barn/element på slutten av vektoren ved å forbedre lengden på vektoren.
• Deretter innebygde tekst mellom “”Tag å vises på knappen.

Trinn 3: Lag en annen div og legg til data

Bruk deretter “”Tag for å lage en annen div og spesifisere et ID -attributt for å tilordne en bestemt ID til Div -elementet. Legg til avsnittsmerke og definer dataene:

Vedlegg Element

Element 1

Element 2

Produksjon

Trinn 4: Stil “div” container

Få tilgang til Main Div Container ved hjelp av klassenavnet “.hovedinnhold”Og bruk CSS -egenskapene som er nevnt i utdraget nedenfor:

.hovedinnhold
tekst-align: sentrum;
Margin: 30px 70px;
Grense: 4px solid blå;
polstring: 50px;
Bakgrunn: RGB (247, 212, 205);

Her:

• “Tekstalign”Eiendom brukes til å stille inn justering av teksten.
• “margin”Tildeler et rom utenfor den definerte grensen.
• “grense”Angir en grense rundt det definerte elementet.
• “polstring”Legg til tomt plass inne i elementet i en grense.
• “bakgrunn”Eiendom setter en farge på elementets bakside.

Produksjon

Trinn 6: Stilknappelement

Få tilgang til knappen med navnet og bruk de nedenfor oppførte CSS -egenskapene:

knapp
Bakgrunn: RGBA (84, 155, 214, 0.1);
Grense: 3px solid RGB (5, 75, 224);
Border-Radius: 6px;
Farge: RGB (6, 63, 250);
Overgang: Alle .5s;
linjehøyde: 50px;
Markør: peker;
Oversikt: Ingen;
Font-størrelse: 40px;
polstring: 0 20px;

I henhold til ovennevnte kodebit:

• Søke om "grense”Og“bakgrunn”Farger på knappelementet ved å tilordne de spesifikke verdiene.
• “Border-Radius”Eiendom brukes til å sette kurvene på knappen i en rund form.
• “farge”Eiendom definerer en farge for den ekstra teksten inne i elementet.
• “overgang”Gir en metode for å kontrollere animasjonshastigheten når du endrer CSS -egenskaper
• “linjehøyde”Eiendom setter høyden på en linjeboks. Det brukes til å sette avstand i tekstlinjene.
• “markør”Brukes til å tildele musemarkøren for å vise når en peker er over et element.
• “skissere”Brukes til å legge til/tegne en linje rundt elementer, for å få elementet til å skille seg ut.
• “skriftstørrelse”Angir den spesielle størrelsen for teksten i et element.

Produksjon

Trinn 7: Bruk “: Hover” på knappen

Få tilgang til knappelementet sammen med ":sveve”Pseudoklasse som brukes til å velge elementer når brukere mus over dem:

Knapp: Hopp
Farge: RGBA (255, 255, 255, 1);
Bakgrunn: RGB (16, 17, 68);

Sett deretter “farge”Og“bakgrunn”På knappen ved å bruke disse egenskapene.

Trinn 8: Stilens avsnittselement

Få tilgang til avsnittet ved å bruke "p”:

P
Font-størrelse: 20px;
Fontvekt: fet;

Her, bruk "skriftstørrelse”Og“Fontvekt" egenskaper.

Produksjon

Trinn 9: Legg til HTML til containerelement

For å legge HTML til containerelementet, legg til "”Tag og følg deretter de gitte instruksjonene:

• Initialiser en variabel som "Elementnummer”Og tilordne verdien til denne variabelen som“3”.
• Få tilgang til funksjonen med navnet “AddElement ()”Som brukes til å legge til et bestemt element på slutten av vektoren ved å forbedre lengden/størrelsen på vektoren.
• Initialiser deretter variabelen "foreldre”
• Verdien "getElementById ()”Håndter bare et enkelt navn om gangen og returnerer en node i stedet for en komplett rekke noder
• For et nytt element, sett inn en variabel og tilordne verdien som elementet i "

  ”Tag sammen med elementnummeret.

• “INSERTADJACENTHTML ()”Metode brukes til å legge til HTML -kode i en bestemt posisjon.
• Til slutt, “Elementnummer++”Brukes til å øke elementet inne i beholderen.

Det kan observeres at elementet er blitt lagt til containerelementet i henhold til klikket:

Du har lært om den enkleste metoden for å legge HTML til containerelementet uten det indre HTML.

Konklusjon

For å legge HTML til beholderelementet uten indre HTML, kan brukeren bruke JavaScript -funksjonen. Først initialiser en variabel som "Elementnummer”Og verdi”dokument.getElementById ()”Støtter bare ett navn om gangen og returnerer bare en enkelt node, ikke en rekke noder. Deretter, "INSERTADJACENTHTML ()”Metode setter inn HTML -kode i en spesifisert posisjon. Dette innlegget handler om å legge HTML til containerelementet uten det indre HTML.