Hvordan legge til ID til element ved hjelp av JavaScript

I JavaScript, "id”Attributt er viktig fordi den identifiserer et spesifikt element som kan bli funnet ved bruk av“getElementById ()”Metode. ID på HTML -siden må være unik fordi den brukes senere for å få tilgang til HTML -elementets verdier og det relaterte innholdet.

Dette innlegget vil beskrive prosedyren for å legge til en ID til et element i JavaScript.

Hvordan legge til ID til element ved hjelp av JavaScript?

For å legge ID -en til et element, “setAttribute ()”Metode brukes. Det krever to parametere, "Navn”Av attributtet er den første parameteren, for eksempel“id”Og verdien er en andre parameter, for eksempel“ABC”.

Syntaks

Den gitte syntaks -IDen som ble brukt til SetAttribute () -metoden:

element.setAttribute ("id", "verdi")

Det er to måter å legge til en ID til et element i JavaScript:

• Legg til ID ved å lage et nytt element ved hjelp av JavaScript
• Legg til ID til det eksisterende HTML -elementet i JavaScript

De gitte eksemplene vil demonstrere begge veier en etter en!

Eksempel 1: Legg til ID ved å lage nytt element i JavaScript ved hjelp av SetAttribute () -metode

I dette eksemplet vil vi lage en HTML -overskrift av JavaScript og sette ID og innersteksten for DOM -elementet.

I JavaScript -filen lager du et HTML -element "H3" bruker "CreateElement ()”Metode:

const element = dokument.CreateElement ('H3');

Sett den unike ID -en til overskriften ved hjelp av “setAttribute ()”Metode:

element.setAttribute ("id", "overskrift");

Her tar metoden to argumenter:

• “id”Er det første argumentet som er attributtnavnet.
• “overskrift”Er verdien av IDen som en annen attributt.

Få referanse til HTML -kroppskoden ved å bruke “QuerySelector ()”Metode:

var kropp = dokument.QuerySelector ('Body');

Legg til overskriften “H3”Til kroppen ved å bruke“vedlegg ()”Metode ved å gi elementet som et argument:

kropp.appendchild (element);

Angi nå teksten for elementet som vises på DOM ved å bruke "getElementsByTagName ()" med "indrehtml”Eiendom:

dokument.getElementsByTagName ("H3") [0].INNERHTML = "Velkommen til Linuxhint!";

Produksjon

Utgangen betyr at overskriften er vellykket opprettet med sin ID som er satt ved å bruke "setAttribute ()”Metode.

Eksempel 2: Legg til ID i eksisterende element ved bruk av SetAttribute () -metode

La oss prøve å legge til en ny ID til det eksisterende HTML -elementet i JavaScript.

I en HTML -fil, oppretter du en overskrift med

Merk og tilordne en ID til den ved å bruke "id" Egenskap:

Velkommen til Linuxhint!H3>

Den tilsvarende HTML -utgangen vil være:

Nå, i JavaScript -filen, først, få referansen til elementet ved å bruke sin tildelte ID ved hjelp av "getElementById ()”Metode og lagre den i en variabel”Setid”:

var setid = dokument.getElementById ("overskrift");

Sett den nye IDen “overskrift1”Til elementet ved å bruke“setAttribute ()”Metode:

Setid.setAttribute ("id", "heading1");

Produksjon

Ovennevnte utgang indikerer at IDen til HTML -elementoverskriften nå er "overskrift1”Som er satt av JavaScript”setAttribute ()”Metode.

Konklusjon

For å legge til en ID til et element, bruk JavaScript “setAttribute ()”Metode. Det er to måter å legge til en ID til et element i JavaScript, legge til en ID ved å lage et nytt element eller legge til en ID til det eksisterende HTML -elementet i JavaScript. Dette innlegget beskrev prosedyren for å legge til en ID til et element i JavaScript.