dúvida na visualização da página com o código JS | JavaScript: programando na linguagem da web

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Eventos, Formulários e Criando Elementos e atividade Criando um elemento

por Ley

| 175k xp | 208 posts

Se no mundo do JavaScript estamos criando todos os elementos do mundo HTML, por que eu não consigo visualizar no Browser o código montado na aula?

Quero dizer, se eu atualizasse o navegador com o código puro do JS:

<script>
var div = document.createElement("div");
var h1 = document.createElement("h1");
h1.classList.add("titulo");
h1.textContent = "Mirror Fashion";

var p = document.createElement("p");
p.textContent = "Uma loja de roupa fantástica";

div.appendChild(h1);
div.appendChild(p);
</script>

Não deveria a parecer o mesmo que somente o código HTML, com as mesmas instruções?

<div>
    <h1 class="titulo"> Mirror Fashion </h1>
    <p> Uma loja de roupa fantástica</p>
</div>

No meu navegador, a página fica em branco se eu só uso o código do JS.

2 respostas

solução!

por Joel Spinelli

| 620.9k xp | 630 posts

Desenvolvedor Node e Front End

11/02/2020

Oi Ley, se você reparar bem você está acrescentando o seu h1 e o p na sua div, que foi criada na primeira linha do seu script, porém você não acrescentou essa div no seu documento html, por isso a sua página fica em branco.

Se você inserir um console.log(div) logo após o appendChild(p), você vai ver o código igual ao que você colocou mais acima. O que falta mesmo é acescentar essa div no html.

Uma brincadeira rápida que eu fiz aqui utilizando a sua ideia foi essa

<script>
    var div = document.createElement("div");
    var h1 = document.createElement("h1");
    var html = document.querySelector("html"); // Selecionei o html

    h1.classList.add("titulo");
    h1.textContent = "Mirror Fashion";

    var p = document.createElement("p");
    p.textContent = "Uma loja de roupa fantástica";

    div.appendChild(h1);
    div.appendChild(p);

    html.appendChild(div); // add a div ao html
</script>

Espero ter ajudado

por Ley

| 175k xp | 208 posts

11/02/2020

Tem razão! não tinha pensado nisso. Obrigado, Joel!