I would like to know how to add html div through pure js

Asked

Viewed 44 times

-4

I would like to know how I can add several new divs in the div id "new-list-container" by clicking on the button of id "button".

In the Javascript code I created, when I click, creates only one div and if you click again it doesn’t create another.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="./style/css/style.css">
    <title>To do list</title>
</head>
<body>
    <header>
        <div class="page-title">
            <h1>To do List</h1>
        </div>
    </header>

    <main>
        <div class="create-list">
            <input type="text" name="list-title" maxlength="30"> 
            <button id="button" class="btn" onclick="newList()">Criar nova lista</button>
         </div>

         <div id="new-list-container">
            
         </div>

         <div class="remove-all-list">

             <div>

                <input type="checkbox" name="remove" id="remove">
                <label for="remove">Deseja remover todas as listas?</label>

                <button class="btn">Remover listas</button>

            </div>   

         </div>
    </main>

    <footer>

    </footer>

    <script src="style/js/code.js"></script>
</body>
</html>

Ps: It is the first time I put here so I don’t know how to use the platform very well.

javascript html5

  • which javascript code creates the div?

4 answers

0

You lacked a little effort and search, in a quick google search you has this example, this example and also this example.

Before you ask a question on Stackoverflow always do a detailed search to make sure you don’t post a duplicate question and get unnecessary downvotes.

-2

is quite simple, we can do using Document.createelement()

<div id="meuDiv"></div>
<script>
    function myFunction(){
        var div = document.createElement("DIV");//crio uma variável para definir que o elemento será uma div
        div.innerHTML = "<h1>Hello World</h1>";//crio uma tag H1(com "hello world" escrito nela) dentro da div
        document.getElementById("meuDiv").appendChild(div);//pego o nome da div pai usando seu id("meuDiv") depois uso appendChild para criar um elemento filho dentro da div
    }
   myFunction();//chamo a função para criar a div
</script>

you could also use the body as a father just by swapping document.getElementById("meuDiv") for document.body or you can also put the parent element into a variable:

var pai = document.getElementById("meuDiv"); 
//ou apenas
var pai = document.body;//caso queira que o pai fosse o body
pai.appendChild(div);

-2


You can create through the createelement()

Follow an example

var div = document.createElement("DIV");

after creating the div, if you want to put text you will use . innerHTML or . innerText, it depends on the purpose of such.

var div = document.createElement("DIV");
div.innerHTML = "<b>Hello World!</b>";

To appear on the page you will need to use body.appendchild()

var div = document.createElement("DIV");
div.innerHTML = "<b>Hello World!</b>";
document.body.appendChild(div);

To learn more about the createelement() Click here

  • 1

    Thank you, I’m starting now on js and your comment helped me a lot.

-2

Post your javascript code, so we can see what you did and so help.

The working logic is like this, you need to make an append every time you insert, otherwise you just rewrite the div.

But essentially a function that adds new Ivs (directly into the DOM) would be something like this:

function addDiv() {
 let newDiv = document.createElement("div"), //Cria um element DIV
 container = document.getElementById("new-list-container"); //Grava a sua div que receberá novos dados em uma variável

 newDiv.innerHTML = '<p>Novo conteúdo</p>'; //Insere um conteúdo dentro da nova div

 container.append(newDiv); //Adiciona ao final da sua div o novo conteúdo
 
}

  • Thanks for the reply thanks to her I managed to solve the problem. I was not putting the append so I was only rewriting the div.

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.