Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Criando elemento HTML através de JavaScript.

Olá. Não sei se é uma dúvida muito boba, mas fiquei pensativa.

Na aula 4, atividade 6, é criando um elemento HTML, utilizando JavaScript. No nosso HTML, já temos os TD's e TR's criados pro Paulo, João, Maria etc na estrutura. Quando crio com o JavaScript, isso vai pro documento HTML? Digo, ele é inserido automaticamente na estrutura HTML?

Outra coisa é:

   var tabela = document.querySelector("#tabela-pacientes");

    tabela.appendChild(pacienteTr);

Nesse trecho do código, o querySelector não retorna apenas o conteúdo da tabela? Como, usando o tabela.appendChild, eu consigo adicionar o paciente direto na tabela do html?

3 respostas

Fala ai Lia, tudo bem? Vamos lá:

Na aula 4, atividade 6, é criando um elemento HTML, utilizando JavaScript. No nosso HTML, já temos os TD's e TR's criados pro Paulo, João, Maria etc na estrutura. Quando crio com o JavaScript, isso vai pro documento HTML?

Na verdade quando você cria o td ou tr com o document.createElement ele vai estar disponível apenas no JavaScript, ele só vai para o HTML quando você faz o appendChild dentro de algum elemento que já está na página.

Digo, ele é inserido automaticamente na estrutura HTML?

Não, ele só vai ser inserido quando realizar o uso do appendChild em algum elemento que já está na página.

Nesse trecho do código, o querySelector não retorna apenas o conteúdo da tabela? Como, usando o tabela.appendChild, eu consigo adicionar o paciente direto na tabela do html?

Nesse caso o querySelector vai buscar algum elemento na página que tenha o id igual à tabela-pacientes e vai referenciá-lo na variável tabela, se o id estiver definido no body da table, ao utilizar o appendChild ele vai inserir uma nova linha no corpo da tabela.

Porém, se o id estiver definido no table, você vai precisar buscar o body dentro da tabela e depois fazer o appendChild.

Espero ter ajudado.

Muito obrigada! E seria uma boa prática criar direto pelo JavaScript, ao invés de criar no HTML, como já estava feito? Por exemplo, crio apenas a estrutura da tabela, e vou adicionando através do JS?

solução!

Depende de cada cenário, eu deixaria no próprio HTML por padrão uma tabela com uma tr informando que a tabela está vazia.

Uma vez ao adicionar um registro, realizaria o appendChild do novo registro e removeria a linha informando que a mesma estava vazia.

Espero ter ajudado.