Home I need to add row of bunch of input divs using onclick button,, but it gives an error

Questions

I need to add row of bunch of input divs using onclick button,, but it gives an error

September 9, 2022

Here is my HTML code.
I need to add another row once I click the <button onclick="Addrow()">Add Employees Row</button> so I tried using appendchild and insertAdjacentHTML,, but it doesn’t work.. Anyone please can help me?

What I am targeting to create is..
enter image description here

<!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" />
    <title>Employees Details</title>
    <link rel="stylesheet" href="css/employees.css" />
    <script src="./js/Employees.js" defer></script>
  </head>
  <body>
    <div class="wrapper">
      <div class="header">
        <div class="title">Employees Details</div>
        <div class="AddRow">
          <button onclick="Addrow()">Add Employees Row</button>
        </div>
      </div>
      <div class="contents-grid">
        <div class="contents">
          <div class="Detail-Info-Grid">
            <input type="text" placeholder="Designation" />
            <input type="text" placeholder="Employee Name" />
            <input type="text" placeholder="Employee ID" />
            <input type="text" placeholder="Prev Company" />
          </div>
          <div class="remove">
            <button>Remove</button>
          </div>
        </div>
      </div>
      <div class="submit">
        <button>Submit</button>
      </div>
    </div>
  </body>
</html>

Here is my css code

.wrapper {
  background-color: lightpink;
  display: flex;
  flex-direction: column;
  max-width: fit-content;
  padding: 10px;
}

.header {
  background-color: lightblue;
  justify-content: center;

  display: flex;
}

button {
  border-radius: 10px;
  background-color: lightblue;
  padding: 5px;
  border: 1px solid;
}

::placeholder {
  text-align: center;
  color: black;
}
input {
  margin: 10px;
  background-color: lightblue;
  padding: 3px;
  border: 1px solid;
}

.title {
  align-items: center;
  flex: 1;
  display: flex;
  justify-content: center;
  transform: translateX(65px);
}

.remove {
  display: flex;
  align-items: center;
  /* vertical-align: center; */
}

.contents {
  background-color: lightseagreen;
  display: flex;
  flex-direction: row;
}

.contents-grid {
  display: flex;
  flex-direction: column;
}

.submit {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

My Javascript with error..

const ContentsGrid = document.getElementsByClassName("contents-grid");
const Addrow = function () {
  const html = `
  <div class="contents">
          <div class="Detail-Info-Grid">
            <input type="text" placeholder="Designation" />
            <input type="text" placeholder="Employee Name" />
            <input type="text" placeholder="Employee ID" />
            <input type="text" placeholder="Prev Company" />
          </div>
          <div class="remove">
            <button>Remove</button>
          </div>
        </div>
  `;
  ContentsGrid.appendChild(html);
  //   ContentsGrid.insertAdjacentHTML("afterend", html);
  //   ContentsGrid.innerHTML += html;
};

// document.getElementById("AddEmployeesRow").addEventListener("click", Addrow);

>Solution :

Here is working example:

const ContentsGrid = document.querySelector(".contents-grid");
const Addrow = function() {
  const html = `
  <div class="contents">
          <div class="Detail-Info-Grid">
            <input type="text" placeholder="Designation" />
            <input type="text" placeholder="Employee Name" />
            <input type="text" placeholder="Employee ID" />
            <input type="text" placeholder="Prev Company" />
          </div>
          <div class="remove">
            <button>Remove</button>
          </div>
        </div>
  `;
  ContentsGrid.insertAdjacentHTML('beforeend', html);
};

.wrapper {
  background-color: lightpink;
  display: flex;
  flex-direction: column;
  max-width: fit-content;
  padding: 10px;
}

.header {
  background-color: lightblue;
  justify-content: center;
  display: flex;
}

button {
  border-radius: 10px;
  background-color: lightblue;
  padding: 5px;
  border: 1px solid;
  position: relative;
  z-index: 1;
}

::placeholder {
  text-align: center;
  color: black;
}

input {
  margin: 10px;
  background-color: lightblue;
  padding: 3px;
  border: 1px solid;
}

.title {
  align-items: center;
  flex: 1;
  display: flex;
  justify-content: center;
  transform: translateX(65px);
}

.remove {
  display: flex;
  align-items: center;
  /* vertical-align: center; */
}

.contents {
  background-color: lightseagreen;
  display: flex;
  flex-direction: row;
}

.contents-grid {
  display: flex;
  flex-direction: column;
}

.submit {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

<!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" />
  <title>Employees Details</title>
</head>

<body>
  <div class="wrapper">
    <div class="header">
      <div class="title">Employees Details</div>
      <div class="AddRow">
        <button type="button" onClick="Addrow()">Add Employees Row</button>
      </div>
    </div>
    <div class="contents-grid" id="contents-grid">
      <div class="contents">
        <div class="Detail-Info-Grid">
          <input type="text" placeholder="Designation" />
          <input type="text" placeholder="Employee Name" />
          <input type="text" placeholder="Employee ID" />
          <input type="text" placeholder="Prev Company" />
        </div>
        <div class="remove">
          <button>Remove</button>
        </div>
      </div>
    </div>
    <div class="submit">
      <button>Submit</button>
    </div>
  </div>
</body>