You can select the specific element from the HTML through vanilla javascript So please review the code and watch the video for details explanation
How to select an element in JS | select complex element in JavaScript | Advance javascript tutorials
<!doctype html> | |
<html lang="en"> | |
<head> | |
<!-- Required meta tags --> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
<!-- Bootstrap CSS --> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> | |
<title>Hello, world!</title> | |
</head> | |
<body> | |
<h1>Hello, world!</h1> | |
<table class="table table-dark"> | |
<thead> | |
<tr> | |
<th scope="col">#</th> | |
<th scope="col">First</th> | |
<th scope="col">Last</th> | |
<th scope="col">Handle</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<th scope="row">1</th> | |
<td>Mark</td> | |
<td>Otto</td> | |
<td>@mdo</td> | |
</tr> | |
<tr> | |
<th scope="row">2</th> | |
<td>Jacob</td> | |
<td>javascript</td> | |
<td>@fat</td> | |
</tr> | |
<tr> | |
<th scope="row">3</th> | |
<td>Larry</td> | |
<td>the Bird</td> | |
<td>@twitter</td> | |
</tr> | |
</tbody> | |
</table> | |
<!-- Optional JavaScript --> | |
<!-- jQuery first, then Popper.js, then Bootstrap JS --> | |
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> | |
<script> | |
element = document.querySelector('body > table > tbody > tr:nth-child(2) > td:nth-child(3)'); | |
element.style.color="red"; | |
element.style.background="white"; | |
console.log(element); | |
</script> | |
</body> | |
</html> |
<!doctype html> | |
<html lang="en"> | |
<head> | |
<!-- Required meta tags --> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
<!-- Bootstrap CSS --> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> | |
<title>Hello, world!</title> | |
</head> | |
<body> | |
<div class="container"> | |
<h1>Add Field Dynamically through vanilla javascript</h1> | |
<div class="addFieldDynamically"> </div> | |
</div> | |
<!-- Optional JavaScript --> | |
<!-- jQuery first, then Popper.js, then Bootstrap JS --> | |
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> | |
<script> | |
var idNumber=1; | |
selector= document.querySelector("body > div > div.addFieldDynamically"); | |
selector.innerHTML="<table id='tableThroughJvascript'><tr><td><button class='btn btn-primary' id='addNewRow'>Add</button></td>\ | |
</tr></table>"; | |
function addFieldDynamically() | |
{ | |
newTrElement=document.createElement("tr"); | |
newTrElement.setAttribute("id", "dynamicRow"+idNumber+"'"); | |
newTrElement.innerHTML="<td><select class='form-control' id='country"+idNumber+"'><option valve='IN'>India</option><option value='USA'>United State</option></select></td>\ | |
<td><button class='btn btn-danger' onclick='removeRow(this)' id='countryButton"+idNumber+"'>Remove</button></td>" | |
document.getElementById('tableThroughJvascript').append(newTrElement); | |
idNumber++; | |
} | |
document.getElementById('addNewRow').addEventListener("click", myFunction); | |
function myFunction() | |
{ | |
addFieldDynamically(); | |
} | |
function removeRow(el) | |
{ | |
console.log(el.parentElement.parentElement); | |
el.parentElement.parentElement.remove(); | |
} | |
</script> | |
</body> | |
</html> |