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

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/[email protected]/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>

CodePudding user response：

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  ;
}

CodePudding user response：

In your create function, create a new div.row first. Append the elements to that, and finally append the row to the modal.

let a = 1;

//function to create text area and date picker with unique id
function create() {
  let row = document.createElement('div');
  row.className = 'row';
  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);

  row.append(pickdate, input);
  document.querySelector('.modal-body .container-fluid').appendChild(row);

  a  ;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#myModal" onclick="create()">Add New Record</button>

<!-- Modal start-->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-bs-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>