Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Ajuda com createelement e append child

por Eduardo Marçal Clemente
| 98.7k xp | 12 posts

Pessoal , fiz um html simples e um codigo js para criar uma div dentro do elemento div de class: secao , porem não funciona de jeito nenhum e o engraçado é que ao inspecionar a pagina o elemento div não aparece dentro da section. Poderiam me ajudar?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="cards.css">
    <title>Document</title>
</head>
<body>

    <button class="cria">CLIQUE AQUI</button>

    <section>
        <div class="secao">

        </div>


    </section>


    <script src="./comunidade.js"></script>

</body>
</html>

**Java Script

const btn1 = document.querySelector(".cria")
const secao = document.querySelector(".secao")

btn1.addEventListener('click',divisao())

  function divisao(){

    const CriaDiv = document.createElement("p")
    CriaDiv.classList.add("div-shadown")
    CriaDiv.appendChild(secao)




  }

**csss cards.css

  .div-shadown{
          width: 5em;
          height: 2em;
          color: yellow;
          border: 1px solid blue;
        }
1 resposta
solução!
por Lorena Garcia
| 7967.4k xp | 11559 posts
Alura Scuba Team Suporte Educacional

Oi Eduardo, tudo bem?

Há alguns problemas no seu código JavaScript que estão impedindo que a div seja criada corretamente. Vou destacar os problemas e fornecer a solução correta:

  1. Ao adicionar o evento de clique ao botão, você está invocando a função divisao() em vez de passá-la como referência. Para corrigir isso, remova os parênteses após divisao na linha do addEventListener:
btn1.addEventListener('click', divisao);
  1. Ao criar a nova div, você está adicionando a div .secao como filho da nova div CriaDiv, o que é o oposto do que você deseja. Em vez disso, você precisa adicionar a nova div como filho da div .secao. Portanto, altere a linha CriaDiv.appendChild(secao); para secao.appendChild(CriaDiv);.

Depois de fazer essas alterações, seu código JavaScript deve ser assim:

const btn1 = document.querySelector(".cria");
const secao = document.querySelector(".secao");

btn1.addEventListener('click', divisao);

function divisao() {
  const CriaDiv = document.createElement("div");
  CriaDiv.classList.add("div-shadown");
  secao.appendChild(CriaDiv);
}

Certifique-se também de que o caminho para o arquivo JavaScript está correto e que o arquivo cards.css está presente na localização correta para que os estilos sejam aplicados corretamente.

Espero que isso ajude a resolver o problema e permita que a div seja criada corretamente dentro da seção.

Um abraço e bons estudos.