Javascript: copy element html

Question

I need to copy the .container element without using innerHTML.

here the index.html

<!DOCTYPE html>
<html>

<head>
  <title> </title>
  <meta charset="UTF-8"></meta>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" type="text/css" href="css/test.css">
  <!-- Utilitats CSS i icones Bootstrap CDN -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  <script src="js/test.js"></script>

</head>

<body>
  <div class="text-center">
    <div class="card-header bg-info row">
      <div class="col-sm-4">
        <img src="https://pbs.twimg.com/profile_images/1046722856929947649/hytXqKH0_400x400.jpg" height="80">
      </div>
      <div class="col-sm-4">
        <h3 class="display-4">Agenda IOC</h3>
        <h4 class="text-warning">Consulta tots els esdeveniments</h4>
      </div>
      <div class="col-sm-4">
        <h5 class="card-title">Elegeix la data:</h5>
        <input id="data" type="date">
        <button id="cerca">Cerca</button>
      </div>
    </div>

    <div class="container">
      <div class="card">
        <div class="card_image-container">
          <img class="card-image" src="http://agenda.cultura.gencat.cat/content/dam/agenda/articles/2018/07/03/033/Esculturas.jpg" alt="">
        </div>
        <div class="card-body">
          <h3 class="card-title">Title</h3>
          <p>Description</p>
          <a href="#" class="btn btn-primary btn-lg" role="button">Go</a>
        </div>
      </div>
    </div>

  </div>

  <!-- Utilitats js de Bootstrap CDN -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

Copy the element and show it when click in the button.

I need to create a function that I can change the values of each element created.

If you didn't want to use innerHTML you do it with `document.createELement` and then `appendChild` for all elements. Or you can use ReactJS for it — Robert Hovhannisyan, Dec 05 '19 at 09:10
You can try to [clone the element](https://stackoverflow.com/questions/921290/is-it-possible-to-clone-html-element-objects-in-javascript-jquery) — Thum Choon Tat, Dec 05 '19 at 09:10

Javascript: copy element html

0 Answers0