How to insert html tags into the document using javascript?

Question

How to insert html tags into the document using javascript?

Asked 5 years, 5 months ago

Viewed 328 times

2

I have to make a bingo where, by typing a name in the field and clicking the button, the project generates a table with the name typed and some more columns containing random numbers. I was trying to insert tables, columns and rows into pages, but for some reason the columns aren’t created, please help me, here’s the code:

<!DOCUMENT html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
    </head>

    <body>

        <input type="text" id="nome">
        <input type="button" name="Criar" value="Cadastrar" id="botao">


        <script> 
            var nome = window.document.getElementById('nome')
            var botao = window.document.getElementById('botao')
            botao.addEventListener('click',clicar_botao)

            function clicar_botao(){
                var elemento_bisavo = document.body;
                var elemento_avo = document.createElement('table');
                var elemento_pai = document.createElement('tr');
                var elemento_filho = document.createElement('th');
                var texto = document.createTextNode(nome.value);
                elemento_filho.appendChild(texto);
                elemento_bisavo.appendChild(elemento_avo);
                elemento_avo.appendChild(elemento_pai);
                elemento_pai.appendChild(elemento_filho);



            }
        </script>
    </body>
</html>

The goal is for the different names (new clicks on the button) to be horizontal with each other, but they are below each other, as if they were part of a list and not a table.

Face each time you type a name and click on btn vc generates a new table, so that one is below the other same... what would be the behavior that you want, that each generated new table is next to each other? And if it’s 200 tables like it is?

– hugocsl

2019/07/19 at 18:15
Ata, I saw that from the obg tables there. The behavior I want is to stand next to each other in this case, and at first it is to be able to create infinite tables, according to my teacher

– Akali

2019/07/19 at 18:29
Where is the code that generates the columns with the numbers?

– Sam

2019/07/19 at 18:31
this part I have not done yet, I want to do the part of the generation of tables

– Akali

2019/07/19 at 18:34

1 answer

Browser other questions tagged javascript html5

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

by hugocsl • **65,517** points · Answer 1 · 2019-07-19T18:38:12+00:00

Guy does so then. Instead of putting the direct moves on document.body, creates a container with display:flex and creates the tables within this container, so it’ll be next to each other.

var nome = window.document.getElementById('nome')
var botao = window.document.getElementById('botao')
botao.addEventListener('click',clicar_botao)

function clicar_botao(){
  var elemento_bisavo = document.getElementById('container');
  var elemento_avo = document.createElement('table');
  var elemento_pai = document.createElement('tr');
  var elemento_filho = document.createElement('th');
  var texto = document.createTextNode(nome.value);
  elemento_filho.appendChild(texto);
  elemento_bisavo.appendChild(elemento_avo);
  elemento_avo.appendChild(elemento_pai);
  elemento_pai.appendChild(elemento_filho);
}

#container {
  display: flex;
  flex-wrap: wrap;
}
table {border: 1px solid black; margin: 10px;}

<input type="text" id="nome">
<input type="button" name="Criar" value="Cadastrar" id="botao">
<div id="container"></div>