Como adicionar ID ao elemento usando JavaScript

Em JavaScript, o “eu ia”O atributo é significativo porque identifica um elemento específico que pode ser encontrado usando o“getElementById ()”Método. O ID na página HTML precisa ser único porque é usado posteriormente para acessar os valores do elemento HTML e o conteúdo relacionado.

Este post descreverá o procedimento para adicionar um ID a um elemento em JavaScript.

Como adicionar ID ao elemento usando JavaScript?

Para adicionar o ID a um elemento, o “setAttribute ()”O método é usado. Requer dois parâmetros, o “nome”Do atributo é o primeiro parâmetro, como“eu ia”E seu valor é um segundo parâmetro, como“abc”.

Sintaxe

O ID de sintaxe dado usado para o método setAttribute ():

elemento.setattribute ("id", "valor")

Existem duas maneiras de adicionar um ID a um elemento em JavaScript:

• Adicionar ID criando um novo elemento usando JavaScript
• Adicione ID ao elemento HTML existente em JavaScript

Os exemplos dados demonstrarão os dois lados um por um!

Exemplo 1: Adicione ID criando um novo elemento em javascript usando o método setAttribute ()

Neste exemplo, criaremos um cabeçalho HTML por JavaScript e definiremos seu ID e o interior do elemento DOM.

No arquivo JavaScript, crie um elemento HTML “H3”Usando o“createElement ()”Método:

const elemento = documento.createElement ('H3');

Defina o ID exclusivo para o cabeçalho usando o “setAttribute ()”Método:

elemento.setattribute ("id", "cabeçalho");

Aqui, o método leva dois argumentos:

• O "eu ia”É o primeiro argumento que é o nome do atributo.
• O "cabeçalho”É o valor do ID como um segundo atributo.

Obtenha a referência da tag corporal HTML usando o “QuerySelector ()”Método:

Var Body = Documento.queryselector ('corpo');

Adicione o cabeçalho “H3”Para o corpo, usando o“ApndendChild ()”Método, passando o elemento como um argumento:

corpo.appendChild (elemento);

Agora, defina o texto para o elemento que será exibido no dom usando o “getElementsByTagName ()" com o "Innerhtml" propriedade:

documento.getElementsByTagName ("H3") [0].INNERHTML = "Bem -vindo ao Linuxhint!";

Saída

A saída significa que o cabeçalho é criado com sucesso com seu ID que é definido usando o “setAttribute ()”Método.

Exemplo 2: Adicione ID ao elemento existente usando o método setAttribute ()

Vamos tentar adicionar um novo ID ao elemento HTML existente em JavaScript.

Em um arquivo html, crie um título com

Tag e atribua um ID a ele usando o “eu ia”Atributo:

Bem -vindo ao Linuxhint!H3>

A saída HTML correspondente será:

Agora, no arquivo JavaScript, primeiro, obtenha a referência do elemento usando seu ID atribuído com a ajuda do “getElementById ()”Método e armazene -o em uma variável“setid”:

var setId = documento.getElementById ("cabeçalho");

Defina o novo ID “Cabeçallho 1”Para o elemento usando o“setAttribute ()”Método:

setid.setattribute ("id", "heading1");

Saída

A saída acima indica que o ID do cabeçalho do elemento HTML está agora “Cabeçallho 1”Que é definido pelo JavaScript“setAttribute ()”Método.

Conclusão

Para adicionar um ID a um elemento, use o JavaScript “setAttribute ()”Método. Existem duas maneiras de adicionar um ID a um elemento em JavaScript, adicione um ID criando um novo elemento ou adicione um ID ao elemento HTML existente em JavaScript. Este post descreveu o procedimento para adicionar um ID a um elemento em JavaScript.