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

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 >
      <div >
        <div >Employees Details</div>
        <div >
          <button onclick="Addrow()">Add Employees Row</button>
        </div>
      </div>
      <div >
        <div >
          <div >
            <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 >
            <button>Remove</button>
          </div>
        </div>
      </div>
      <div >
        <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 >
          <div >
            <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 >
            <button>Remove</button>
          </div>
        </div>
  `;
  ContentsGrid.appendChild(html);
  //   ContentsGrid.insertAdjacentHTML("afterend", html);
  //   ContentsGrid.innerHTML  = html;
};

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

CodePudding user response：

Here is working example:

const ContentsGrid = document.querySelector(".contents-grid");
const Addrow = function() {
  const html = `
  <div >
          <div >
            <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 >
            <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 >
    <div >
      <div >Employees Details</div>
      <div >
        <button type="button" onClick="Addrow()">Add Employees Row</button>
      </div>
    </div>
    <div  id="contents-grid">
      <div >
        <div >
          <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 >
          <button>Remove</button>
        </div>
      </div>
    </div>
    <div >
      <button>Submit</button>
    </div>
  </div>
</body>

CodePudding user response：

I am not as familiar with vanila javascript, but I dont see other answers. Ive never used getElementsByClassName, and I could not get it to work this time.

I am also not sure why you dont just append the input and not re-write your entire html.

if you want to use just append, you would need something like jquery.

if you want to add something simliar to what jquery does with append, that would be using = and innerHtml.

  const ContentsGrid = document.getElementById("contents-grid");
  const Addrow = function () {
    const html = `
    <div >
            <div >
              <input type="text" placeholder="Designation" />
              <input type="text" placeholder="Employee Name" />
              <input type="text" placeholder="Employee ID" />
              <input type="text" placeholder="Prev Company" />
              <input type="text" placeholder="Employees" />
            </div>
            <div >
              <button>Remove</button>
            </div>
          </div>
    `;
    ContentsGrid.innerHTML = html;
    //   ContentsGrid.insertAdjacentHTML("afterend", html);
    //   ContentsGrid.innerHTML  = html;

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

<!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 >
      <div >
        <div >Employees Details</div>
        <div >
          <button onclick="Addrow()">Add Employees Row</button>
        </div>
      </div>
      <div  id="contents-grid">
        <div >
          <div >
            <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 >
            <button>Remove</button>
          </div>
        </div>
      </div>
      <div >
        <button>Submit</button>
      </div>
    </div>
  </body>

  </html>