2

I have been trying to create a td and some tr inside, an put all of them inside a tbody with id user_information in the html I, have done this so far but it doesnt work.

I can show the info propertly but not to put the element inside the table body

How could I add new elements before, after and inside with js?

Thanks for your help 

var ccc = document.createElement("tr");
ccc.innerHTML = "<td>"+ all_users[0].new_user_name_val + "</td>" + "<td>"+ 
all_users[0].new_user_lastname_val + "</td>" + "<td>"+ all_users[0].new_user_email_val + "</td>" + " <td>"+ all_users[0].new_user_phone_val + "</td>" ;
document.body.appendChild(ccc);
var currentDiv = document.getElementById("user_information"); 
currentDiv.innerHTML = ccc 


var new_user_name = document.querySelector("#new_user_name");
var new_user_lastname = document.querySelector("#new_user_lastname");
var new_user_email = document.querySelector("#new_user_email");
var new_user_phone = document.querySelector("#new_user_phone");
var new_user_btn = document.querySelector("#new_user_btn");
var signed_user = document.querySelector(".signed_user");
new_user_btn.addEventListener("click", function(){
 var new_user_name_val = new_user_name.value;
 var new_user_lastname_val = new_user_lastname.value;
 var new_user_email_val = new_user_email.value;
 var new_user_phone_val = new_user_phone.value;
 if(new_user_name_val !== "" && new_user_lastname_val !== "" && new_user_email_val !== "" && new_user_phone_val !== ""){
 
 var all_users = [];
 class users {
 constructor(new_user_name_val, new_user_lastname_val, new_user_email_val, new_user_phone_val){
 this.new_user_name_val = new_user_name_val;
 this.new_user_lastname_val = new_user_lastname_val;
 this.new_user_email_val = new_user_email_val;
 this.new_user_phone_val = new_user_phone_val;
 }
 }
 var sign_new_user = new users (new_user_name_val, new_user_lastname_val, new_user_email_val, new_user_phone_val);
 all_users.push(sign_new_user);
 
 var ccc = document.createElement("tr");
 ccc.innerHTML = "<td>"+ all_users[0].new_user_name_val + "</td>" + "<td>"+ all_users[0].new_user_lastname_val + "</td>" + "<td>"+ all_users[0].new_user_email_val + "</td>" + "<td>"+ all_users[0].new_user_phone_val + "</td>" ;
 document.body.appendChild(ccc);
 var currentDiv = document.getElementById("user_information"); 
 currentDiv.innerHTML = ccc
 
 // signed_user.innerHTML = "<td>"+ all_users[0].new_user_name_val + "</td>" + "<td>"+ all_users[0].new_user_lastname_val + "</td>" + "<td>"+ all_users[0].new_user_email_val + "</td>" + "<td>"+ all_users[0].new_user_phone_val + "</td>";
 } 
 
 
 new_user_name_val = new_user_name.value = "";
 new_user_lastname_val = new_user_lastname.value = "";
 new_user_email_val = new_user_email.value = "";
 new_user_phone_val = new_user_phone.value = "";
 
 
});
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="users.css">
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 <script src="https://code.jquery.com/jquery-3.4.1.min.js"
 integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="crossorigin="anonymous"></script>
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/[email protected]/css/themify-icons.css">
 <title>Document</title>
 </head>
 <title>Document</title>
</head>
<body>
 <section class="new_user pt-5">
 <div class="container">
 <div class="row">
 <div class="col-12">
 <!-- nombre, apellido email telefono -->
 <form id="rrr">
 <div class="form-group">
 <label for="exampleInputEmail1">New User Name</label>
 <input type="text" class="form-control main_user_info" id ="new_user_name" aria-describedby="emailHelp">
 </div>
 <div class="form-group">
 <label for="exampleInputPassword1">New User Last Name</label>
 <input type="text" class="form-control main_user_info" main_user_info id="new_user_lastname">
 </div>
 <div class="form-group">
 <label for="exampleInputPassword1">New User Email</label>
 <input type="email" class="form-control main_user_info" id="new_user_email">
 </div>
 <div class="form-group">
 <label for="exampleInputPassword1">New User Phone Number</label>
 <input type="number" class="form-control main_user_info" id="new_user_phone">
 </div>
 <button id="new_user_btn" type="button" class="btn btn-primary">Submit</button>
 </form>
 </div>
 </div>
 </div>
 </section>
 <section class="user_info_table pt-5">
 <div class="container">
 <div class="row">
 <div class="col-12">
 <table class="table table-bordered">
 <thead>
 <tr>
 <th class="text-center" scope="col">Name</th>
 <th class="text-center" scope="col">Last name</th>
 <th class="text-center" scope="col">Email</th>
 <th class="text-center" scope="col">Phone Nnumber</th>
 </tr>
 </thead>
 <tbody id="user_information">
 
 </tbody>
 </table>
 </div>
 </div>
 </div>
 </section>
 <script src="users.js"></script>
</body>
</html>

asked Mar 8, 2020 at 3:53

2 Answers 2

2

You are in the right track. But you need to append the child you created instead of using innerHTML:

Replace 

currentDiv.innerHTML = ccc

to

currentDiv.appendChild(ccc)


var new_user_name = document.querySelector("#new_user_name");
var new_user_lastname = document.querySelector("#new_user_lastname");
var new_user_email = document.querySelector("#new_user_email");
var new_user_phone = document.querySelector("#new_user_phone");
var new_user_btn = document.querySelector("#new_user_btn");
var signed_user = document.querySelector(".signed_user");
new_user_btn.addEventListener("click", function() {
 var new_user_name_val = new_user_name.value;
 var new_user_lastname_val = new_user_lastname.value;
 var new_user_email_val = new_user_email.value;
 var new_user_phone_val = new_user_phone.value;
 if (new_user_name_val !== "" && new_user_lastname_val !== "" && new_user_email_val !== "" && new_user_phone_val !== "") {
 var all_users = [];
 class users {
 constructor(new_user_name_val, new_user_lastname_val, new_user_email_val, new_user_phone_val) {
 this.new_user_name_val = new_user_name_val;
 this.new_user_lastname_val = new_user_lastname_val;
 this.new_user_email_val = new_user_email_val;
 this.new_user_phone_val = new_user_phone_val;
 }
 }
 var sign_new_user = new users(new_user_name_val, new_user_lastname_val, new_user_email_val, new_user_phone_val);
 all_users.push(sign_new_user);
 var ccc = document.createElement("tr");
 ccc.innerHTML = "<td>" + all_users[0].new_user_name_val + "</td>" + "<td>" + all_users[0].new_user_lastname_val + "</td>" + "<td>" + all_users[0].new_user_email_val + "</td>" + "<td>" + all_users[0].new_user_phone_val + "</td>";
 document.body.appendChild(ccc);
 var currentDiv = document.getElementById("user_information");
 currentDiv.appendChild(ccc);
 // signed_user.innerHTML = "<td>"+ all_users[0].new_user_name_val + "</td>" + "<td>"+ all_users[0].new_user_lastname_val + "</td>" + "<td>"+ all_users[0].new_user_email_val + "</td>" + "<td>"+ all_users[0].new_user_phone_val + "</td>";
 }
 new_user_name_val = new_user_name.value = "";
 new_user_lastname_val = new_user_lastname.value = "";
 new_user_email_val = new_user_email.value = "";
 new_user_phone_val = new_user_phone.value = "";
});
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="users.css">
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/[email protected]/css/themify-icons.css">
 <title>Document</title>
 </head>
 <title>Document</title>
</head>
<body>
 <section class="new_user pt-5">
 <div class="container">
 <div class="row">
 <div class="col-12">
 <!-- nombre, apellido email telefono -->
 <form id="rrr">
 <div class="form-group">
 <label for="exampleInputEmail1">New User Name</label>
 <input type="text" class="form-control main_user_info" id="new_user_name" aria-describedby="emailHelp">
 </div>
 <div class="form-group">
 <label for="exampleInputPassword1">New User Last Name</label>
 <input type="text" class="form-control main_user_info" main_user_info id="new_user_lastname">
 </div>
 <div class="form-group">
 <label for="exampleInputPassword1">New User Email</label>
 <input type="email" class="form-control main_user_info" id="new_user_email">
 </div>
 <div class="form-group">
 <label for="exampleInputPassword1">New User Phone Number</label>
 <input type="number" class="form-control main_user_info" id="new_user_phone">
 </div>
 <button id="new_user_btn" type="button" class="btn btn-primary">Submit</button>
 </form>
 </div>
 </div>
 </div>
 </section>
 <section class="user_info_table pt-5">
 <div class="container">
 <div class="row">
 <div class="col-12">
 <table class="table table-bordered">
 <thead>
 <tr>
 <th class="text-center" scope="col">Name</th>
 <th class="text-center" scope="col">Last name</th>
 <th class="text-center" scope="col">Email</th>
 <th class="text-center" scope="col">Phone Nnumber</th>
 </tr>
 </thead>
 <tbody id="user_information">
 </tbody>
 </table>
 </div>
 </div>
 </div>
 </section>
 <script src="users.js"></script>
</body>
</html>

answered Mar 8, 2020 at 4:06
Sign up to request clarification or add additional context in comments.

Comments

0

in order to add something to an existing element you use

element.html('myText');
answered Mar 8, 2020 at 4:19

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.