Question 214420 in Html Question posted in
Some basic documentation can be found here.

Html – How to clone an element and create it everytime a button is clicked

I want to copy the div element and paste it next to it when a button is clicked.
Here is my attempt which doesn’t work.

<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>

<div style="width: 18rem;" class="card" id="box">
    <div class="card-body">
        <h5 class="card-title" id="Cat1"></h5>
        <p class="card-text">No Products Created</p>
        <a href="#" class="btn btn-primary">+</a>
    </div>
</div>

<button onclick="addItem()">Click Me!</button>
  
<script>
    function addItem() {
          let input = document.createElement('div');
          input.id("box");
          document.getElementById("box").appendChild(input);
    }
</script>
 
</body>
</html>
Tags:

2

Answers


  1. 0

    Here is the solution. .createElement will create a new element and you can’t use the id because id is unique and can be used once in a page. You can use class for replication.

    function addItem() {   

  const node = document.querySelector(".card-body");
  const clone = node.cloneNode(true);

  document.getElementById("box").appendChild(clone);
}
    <!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>

<div style="width: 18rem;" class="card" id="box">
    <div class="card-body">
        <h5 class="card-title" id="Cat1"></h5>
        <p class="card-text">No Products Created</p>
        <a href="#" class="btn btn-primary">+</a>
    </div>
</div>

<button onclick="addItem()">Click Me!</button>
  
</body>
</html>
    Login or Signup to reply.
  2. 0

    You can use the cloneNode() method to clone the element, and then use the appendChild() method to put the cloned element anywhere.

    document.addEventListener("DOMContentLoaded", function () {
    const container = document.getElementById("container");
    const cloneButton = document.getElementById("clone-button");

    function cloneElement() {
        const elementToClone = document.querySelector(".clone-me");
        const clonedElement = elementToClone.cloneNode(true);
        container.appendChild(clonedElement);
    }
    cloneButton.addEventListener("click", cloneElement);
});
    <div id="container">
    <div class="clone-me">
        <p>This is the element to clone.</p>
    </div>

</div>

<button id="clone-button">Clone Element</button>

    Just note that the cloneNode() method may lead to duplicate IDs. You should handle that, citing from MDN:

    Warning: cloneNode() may lead to duplicate element IDs in a document!

    If the original node has an id attribute, and the clone will be placed in the same document, then you should modify the clone’s ID to be unique.

    Also, name attributes may need to be modified, depending on whether duplicate names are expected.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search