how to add a new element into another one JS

J P :

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>

Sunil Lama :

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

Replace

currentDiv.innerHTML = ccc

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>

how to add a new element into another one JS

Guess you like