Como inserir o mesmo conteúdo em vários <span> com o mesmo id?

Front-end JavaScript
,
#1

Eu estou dessenvolvendo um site e para poupar linha eu queria criar uma unica função no meu .js usando o getElementById que ele inserisse certo texto no html ai eu só ia adicionando os Id nas tags mas parece que ele só insere o texto no primeiro Id que apareço no corpo do html, teria outra maneira de inserir coisas no html, o localStorage pega o texto da primera pagina e armazena e eu uso ele aqui, no primeiro span ele exibe o texto.

HTML:

<a >
   <span class="block m-t-xs font-bold font-color-white">Dwight Schrute</span>
   <span class="text-muted text-xs block mr-2 " id="cargo"></span>
   <span class="text-muted text-xs block mr-2" id="cargo"></span>
</a>

JavaScript:

var car = localStorage.getItem("Cargo");
document.getElementById("cargo").innerHTML = car;
#2

Vc não deveria criar elementos com o mesmo id. Ao invés disso use classes. Olha um exemplo:

<span class="meu-span"></span>
<span class="meu-span"></span>
<span class="meu-span"></span>

<script>
  const car = localStorage.getItem("Cargo")
  document.querySelectorAll('.meu-span').forEach(e => {
    e.innerHTML = car
  })
</script>
2 curtidas
#3

Um id deve ser único em uma página (leia aqui e aqui).

É claro que se tiver mais de um elemento com o mesmo id, vai “funcionar”: o browser não vai reclamar e a página será renderizada sem problemas. Mas vale lembrar que os browsers são bem permissivos e aceitam HTML inválido, mal-formado (com tags faltando, etc), então somente “funcionou” não deveria ser um critério para determinar que você fez tudo certo :slight_smile:

O problema é que getElementById retorna apenas um elemento (o primeiro que for encontrado), então se tiver mais de um elemento com o mesmo id, você não conseguirá obter todos. Esse é um bom motivo para não repetir id's :slight_smile:

Você pode então colocar a mesma class nos elementos (como foi sugerido acima pelo @wldomiciano ), ou então adaptar a estrutura do seu HTML. Tem várias formas de fazer, uma delas seria colocar o id no elemento pai, e aí você busca somente os elementos span dentro dele. Ex:

<a id="cargo">
   <span class="block m-t-xs font-bold font-color-white">Dwight Schrute</span>
   <span class="text-muted text-xs block mr-2"></span>
   <span class="text-muted text-xs block mr-2"></span>
</a>

E no JavaScript você busca pelo id="cargo", e depois busca os span's que você quer modificar:

// elemento que tem o id cargo
var a = document.getElementById('cargo');
// busca os span's dentro dele com o class text-muted
for (var span of a.querySelectorAll('span.text-muted')) {
    span.innerHTML = 'texto';
}

No exemplo acima, eu primeiro pego o a (pois ele tem o id="cargo"), e depois pego somente os span's que estão dentro dele, e que tem a classe text-muted.

3 curtidas