dúvida sobre .textContent e .value | Lógica de programação: praticando com desafios

Quando eu estava tentando elaborar o código, eu fiz o seguinte:

function adicionar(){
//criar a lista
let nome = document.getElementById('nome-amigo').value;
let lista = document.getElementById('lista-amigos').textContent;
lista = nome;

mas quando fui checar com os profes no vídeo, eles fizeram o seguinte:

function adicionar(){
//criar a lista
let nome = document.getElementById('nome-amigo');
let lista = document.getElementById('lista-amigos');
lista.textContent = nome.value;

Aparentemente eu coloquei o .textContent e .value no lugar errado, mas por que na hora de adicionar um nome à lista não apareceu. Por que isso aconteceu, sendo que eu os declarei nas variáveis "nome"e "lista"? por que não funcionou quando eu usei lista = nome e por que exatamente lista.textContent = nome.value; funcionou?

Olá Guilherme! Vamos esclarecer suas dúvidas sobre o uso de .textContent e .value no seu código JavaScript.

No seu código, você tentou atribuir diretamente o valor de nome à lista, mas isso não funcionou porque nome e lista são, respectivamente, o valor do input e o texto de um elemento HTML. Veja o que aconteceu:

let nome = document.getElementById('nome-amigo').value; // 'nome' é agora uma string com o valor do input
let lista = document.getElementById('lista-amigos').textContent; // 'lista' é uma string com o texto do elemento
lista = nome; // Aqui você está apenas mudando o valor da variável 'lista', não o conteúdo do elemento HTML

Quando você faz lista = nome;, você está apenas substituindo o valor da variável lista com o valor de nome, mas isso não afeta o conteúdo da página. A variável lista não está mais ligada ao elemento HTML após receber o valor de nome.

Por outro lado, no código dos professores, eles mantêm a referência aos elementos da página e manipulam suas propriedades diretamente, o que efetivamente altera o conteúdo na página:

let nome = document.getElementById('nome-amigo'); // 'nome' é uma referência ao elemento input
let lista = document.getElementById('lista-amigos'); // 'lista' é uma referência ao elemento que contém os amigos
lista.textContent = nome.value; // Aqui o conteúdo de texto de 'lista' é atualizado com o valor do input 'nome'

Neste caso, nome.value acessa o valor atual do campo de input, e lista.textContent atualiza o texto do elemento lista no HTML. Essa é a maneira correta de manipular o conteúdo de elementos HTML através de JavaScript para que as mudanças se reflitam na sua página.

Espero que essa explicação tenha esclarecido a diferença entre atribuir valores a variáveis e modificar propriedades de objetos do DOM.