Come aggiungere ID all'elemento usando JavaScript

In JavaScript, il "id"L'attributo è significativo perché identifica un elemento specifico che può essere trovato usando"getElementById ()" metodo. L'ID nella pagina HTML deve essere unico perché viene utilizzato in seguito per accedere ai valori dell'elemento HTML e al contenuto correlato.

Questo post descriverà la procedura per l'aggiunta di un ID a un elemento in JavaScript.

Come aggiungere ID all'elemento usando JavaScript?

Per aggiungere l'ID a un elemento, il "setAttribute ()"Viene utilizzato il metodo. Richiede due parametri, il "nome"Dell'attributo è il primo parametro, come"id"E il suo valore è un secondo parametro, come"ABC".

Sintassi

L'ID di sintassi dato utilizzato per il metodo setAttribute ():

elemento.setAttribute ("id", "valore")

Esistono due modi per aggiungere un ID a un elemento in JavaScript:

• Aggiungi ID creando un nuovo elemento usando JavaScript
• Aggiungi ID all'elemento HTML esistente in JavaScript

Gli esempi indicati dimostreranno entrambi i modi per uno!

Esempio 1: Aggiungi ID creando un nuovo elemento nel metodo JavaScript usando setAttribute ()

In questo esempio, creeremo un intestazione HTML di JavaScript e imposterà il suo ID e l'innerText per l'elemento DOM.

Nel file JavaScript, crea un elemento HTML "H3" usando il "createElement ()" metodo:

const element = document.createElement ('H3');

Imposta l'ID univoco sull'intestazione usando "setAttribute ()" metodo:

elemento.setAttribute ("id", "intestazione");

Qui, il metodo prende due argomenti:

• IL "id"È il primo argomento che è il nome dell'attributo.
• IL "intestazione"È il valore dell'ID come secondo attributo.

Ottieni il riferimento del tag del corpo HTML usando "QuerySelector ()" metodo:

var body = document.QuerySelector ('Body');

Aggiungi l'intestazione "H3"Al corpo, usando il"appendChild ()"Metodo passando l'elemento come argomento:

corpo.appendChild (elemento);

Ora, imposta il testo per l'elemento che verrà visualizzato sul DOM usando il "getElementsByTagName ()" con il "Innerhtml" proprietà:

documento.getElementsByTagName ("H3") [0].InnerHtml = "Benvenuti a LinuxHint!";

Produzione

L'output indica che l'intestazione viene creata correttamente con il suo ID impostato usando "setAttribute ()" metodo.

Esempio 2: Aggiungi ID all'elemento esistente usando il metodo setAttribute ()

Proviamo ad aggiungere un nuovo ID all'elemento HTML esistente in JavaScript.

In un file HTML, crea un'intestazione con

tagga e assegna un ID ad esso usando "id"Attributo:

Benvenuti in Linuxhint!H3>

L'output HTML corrispondente sarà:

Ora, nel file JavaScript, prima, ottieni il riferimento dell'elemento usando l'ID assegnato con l'aiuto di "getElementById ()"Metodo e archivialo in una variabile"imposta l'ID":

var setid = document.getElementById ("Intestazione");

Imposta il nuovo ID "Intestazione1"All'elemento usando il"setAttribute ()" metodo:

imposta l'ID.setAttribute ("id", "Heading1");

Produzione

L'output sopra indica che l'ID dell'intestazione dell'elemento HTML è ora "Intestazione1"Che è impostato da JavaScript"setAttribute ()" metodo.

Conclusione

Per aggiungere un ID a un elemento, usa il JavaScript "setAttribute ()" metodo. Esistono due modi per aggiungere un ID a un elemento in JavaScript, aggiungere un ID creando un nuovo elemento o aggiungere un ID all'elemento HTML esistente in JavaScript. Questo post ha descritto la procedura per l'aggiunta di un ID a un elemento in JavaScript.