我試圖使用 javascript 創建 HTML 元素，我設法創建了它們，但它們出現在錯誤的位置。我也在使用引導程式。
我現在遇到的問題是如何在頁面的特定位置創建 html 元素。
在這種情況下，在我的 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">×</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>uj5u.com熱心網友回復：
您將元素附加到主體，而不是獲取模態節點并像下面那樣附加到它。
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 ;
}
uj5u.com熱心網友回復：
在您的創建功能中，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/[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">×</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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/362135.html
標籤：javascript html css 引导模式