मैं जावास्क्रिप्ट का उपयोग करके HTML तत्व बनाने की कोशिश कर रहा था, मैं उन्हें बनाने में कामयाब रहा लेकिन वे गलत जगह पर दिखाई दिए। मैं भी बूटस्ट्रैप का उपयोग कर रहा हूँ।

इस समय समस्या यह है कि मैं अपने पृष्ठ में विशिष्ट स्थानों पर HTML तत्व कैसे बना सकता हूं।

इस मामले में, मेरे मोडल-बॉडी डिव-> कंटेनर फ्लुइड डिव -> न्यू रो डिव के तहत

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>
-2
chicken 21 नवम्बर 2021, 16:04
"गलत जगह" का क्या अर्थ है, कृपया विशिष्ट रहें
 – 
Paulie_D
21 नवम्बर 2021, 16:05
document.body को "सही जगह" से बदलें
 – 
Quentin
21 नवम्बर 2021, 16:06
document.body के बजाय document.querySelector('.modal-body')
 – 
connexo
21 नवम्बर 2021, 16:08
उफ़ मेरा बुरा। मैं सवाल संपादित करूंगा। मैं चाहता हूं कि वे मेरे मोडल-बॉडी, कंटेनर-फ्लुइड, नई पंक्ति div . के अंदर दिखाई दें
 – 
chicken
21 नवम्बर 2021, 16:09
create() चलने वाला तत्व कहाँ है?
 – 
connexo
21 नवम्बर 2021, 16:17

2 जवाब

सबसे बढ़िया उत्तर

आप शरीर में तत्वों को जोड़ रहे हैं, इसके बजाय मोडल नोड प्राप्त करें और इसे नीचे की तरह संलग्न करें।

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++;
}
0
Abdur-Rehman M 21 नवम्बर 2021, 16:11

अपने क्रिएट फंक्शन में, पहले एक नया 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>
0
connexo 21 नवम्बर 2021, 16:34