我如何使用 javascript 在正确的位置创建 html

Question

我尝试使用 javascript 创建 HTML 个元素，我设法创建了它们，但它们出现在错误的位置。我也在使用 bootstrap.

我现在遇到的问题是如何在页面的特定位置创建 html 元素。

在这种情况下，在我的模态主体下 div-> 容器流体 div -> 新行 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>

Answer 1

您正在将元素附加到主体，而不是获取模态节点并像下面那样附加到它。

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

Answer 2

在您的创建函数中，首先创建一个新的 div.row。将元素附加到它，最后将该行附加到模式。

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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>

我如何使用 javascript 在正确的位置创建 html

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

html

javascript

css

bootstrap-modal