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">×</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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
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">×</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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>