how do i make create html in the right place using javascript

November 21, 2021

I was trying to create HTML elements using javascript,
i managed to create them but they appear in the wrong place.
im also using bootstrap.

the problem im stuck at the moment right now is how do i create html elements on specific places in my page.

in this case, under my modal-body div-> container fluid div -> new row div

let a = 1;

//function to create text area and date picker with unique id
function create() {

  let input = document.createElement("input");
  input.setAttribute('type', 'text');
  input.setAttribute('class', 'form-control');
  input.setAttribute("id", "txt" + a);

  let pickdate = document.createElement("input");
  pickdate.setAttribute('type', 'date');
  pickdate.setAttribute("id", "pickdate" + a);

  document.body.appendChild(pickdate);
  document.body.appendChild(input);

  a++;
}

.col-md-11 {
  background-color: yellow;
  text-align: right;
  border: 2px solid white;
}

.col-md-2 {
  background-color: lightblue;
  text-align: right;
  border: 2px solid white;
}

.col-md-8 {
  background-color: pink;
}

.col-md-4 {
  background-color: orange;
  text-align: center;
  border: 2px solid white;
}

.col-md-1 {
  background-color: violet;
  align: left;
}

.col-md-5 {
  background-color: grey;
  align: left;
}

.col-md-3 {
  background-color: yellow;
  align: left;
}

.col-md-10 {
  background-color: grey;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>

  <div class="container mt-5">

    <div class="row">

      <div class="col-md-2">
        <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">Add New Record</button>
      </div>

      <div class="col-md-8">

        <input class="form-control input-sm" type="text">

      </div>
      <div class="col-md-1">
        <select name="sort" id="sort">
          <option value="" disabled selected>choose</option>
          <option>Date Filed</option>
          <option>Name</option>
          <option>Purpose</option>
          <option>Status</option>
        </select>
      </div>
      <div class="col-md-1">
        <button class="btn btn-primary">Search</button>
      </div>
    </div>

    <div class="row mt-3">
      <div class="col-md-10">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, iusto?</div>

      <div id="actions" class="col-md-2">
        <button id="editbtn" class="btn btn-success">Edit</button>
        <button id="delbtn" class="btn btn-danger" onclick="delwarning()">Delete</button>
      </div>
    </div>
  </div>

  <!-- Modal start-->
  <div id="myModal" class="modal fade" role="dialog">

    <div class="modal-dialog modal-lg">


      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Add new Record</h4>
        </div>

        <div class="modal-body">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-1"><label for="name">Name:</label></div>
              <div class="col-md-11"><input class="form-control input-lg" type="text"></div>
            </div>
            <div class="row">
              <div class="col-md-1"><label for="name">Purpose:</label></div>
              <div class="col-md-11"><input class="form-control input-lg" type="text"></div>
            </div>
            <div class="row">
              <div class="col-md-1"><label for="name">Date:</label></div>
              <div class="col-md-3"><input class="form-control input-lg" type="date"></div>
              <div class="col-md-2"><label for="name">Destination/s:</label></div>
              <div class="col-md-5"><input class="form-control input-lg" type="text"></div>
              <div class="col-md-1"><button id="addmore" class="btn btn-success" onclick="create()">more</button></div>
            </div>
          </div>
        </div>

      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>

</body>

>Solution :

You are appending elements to the body, instead get the modal node and append to it like below.

function create() {

  let input = document.createElement("input");
  input.setAttribute('type', 'text');
  input.setAttribute('class', 'form-control');
  input.setAttribute("id", "txt" + a);

  let pickdate = document.createElement("input");
  pickdate.setAttribute('type', 'date');
  pickdate.setAttribute("id", "pickdate" + a);

  document.querySelector('.modal-body').appendChild(pickdate);
  document.querySelector('.modal-body').appendChild(input);

  a++;
}