Como adicionar id ao createElement em JavaScript (setAttribute e element.id)

Neste artigo você vai aprender a como adicionar id ao createElement em JavaScript, ou seja, criar um elemento por JavaScript e colocar um id

Fala programador(a), beleza? Bora aprender mais sobre a criação de elementos em JavaScript!

Para resolver o nosso problema, vamos criar o elemento normalmente pelo méotdo createElement

Porém iremos adicionar um novo método a esse elemento o setAttribute

Com este podemos adicionar um atributo que queremos e um valor para o mesmo

Isso vai de acordo com os nossos objetivos

Veja um exemplo de código:

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

element.setAttribute("id", "my-id");

Note que você precisa trocar o nome do id do elemento para o que você deseja

Ele é o segundo argumento da função setAttribute que utilizamos no elemento recém criado

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você aprendeu como adicionar id ao createElement em JavaScript

Utilizamos o método createElemento normalmente, para iniciar nosso novo elemento

Depois utilizamos setAttribute para inserir o atributo de id no mesmo

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Adicionar um bloco curto mostrando a forma direta com a propriedade id: criar o elemento e fazer element.id = ‘meu-id’, explicando que dá no mesmo resultado do setAttribute(‘id’, …) e que muita gente prefere por ser mais curto. Mostrar o código lado a lado dos dois jeitos.

Uma seção ‘Como adicionar id a um elemento que já existe na página’ pegando o elemento com document.querySelector (ou getElementById) e aplicando .id ou setAttribute. Deixar claro que não precisa criar o elemento do zero pra colocar um id.

Um passo curto fechando o caso de uso real: depois de criar o elemento e dar o id, inserir ele na página com appendChild (por exemplo document.body.appendChild(element)), mostrando o elemento indo pro DOM com o id já aplicado.

Uma pergunta direta tipo ‘setAttribute(‘id’) ou element.id: qual usar?’ respondendo em 2 ou 3 linhas que os dois funcionam pra id, que o .id é mais curto e legível pra esse caso, e que o setAttribute é o caminho quando você quer setar qualquer atributo de forma genérica (data-, aria-, etc).