JavaScript
appendchild() method
Syntax:
parentNode.appendChild(childNode)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">JavaScript appendChild() Method</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
</head>
<body>
<ul id="languages">
<li>Python</li>
<li>Java</li>
<li>JavaScript</li>
</ul>
<button onclick="append()">Append</button>
<script>
function append() {
var node = document.createElement("LI");
var textnode = document.createTextNode("C Language");
node.appendChild(textnode);
document.getElementById("languages").appendChild(node);
}
</script>
</body>
</html>
Output
Multiple value using Appendchild
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">JavaScript appendChild() Method</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
</head>
<body>
<div id="menu"></div>
<button onclick="append()">Submit</button>
<script>
function append() {
var lang = ["C", "C++", "Python"];
var ul = document.createElement("ul");
for(i = 0;
i < lang.length; i++){
var li = document.createElement("li");
li.innerHTML = lang[i];
ul.appendChild(li);
}
document.getElementById("menu").appendChild(ul);
}
</script>
</body>
</html>
Output
Seat Reservation System
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input{
}
</style>
<script>
function createseats()
{
for(var row=0;row<3;row++)
{
var dobj=document.createElement("div");
for(var i=0;i<10;i++)
{
var obj=document.createElement("input");
obj.type="checkbox";
obj.id="s"+row+i;
dobj.appendChild(obj);
}
document.getElementById("bus").appendChild(dobj);
}
}
function findprice()
{
var amount=0;
for(var row=0;row<3;row++)
{
for(var col=0;col<10;col++)
{
var value=document.getElementById("s"+row+col).checked;
if(value)
amount+=250;
}
}
document.getElementById("price").innerHTML=amount;
}
</script>
</head>
<body onload="createseats()">
<h2>Seat Reservation</h2>
<div id="bus">
</div>
<button onclick="findprice()">Find Price</button>
<h2 id="price"></h2>
</body>
</html>
Output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function createseats()
{
var seats=[[0,1,1,0,0,1,0,0,1,0],[0,0,1,0,1,1,0,0,1,1],[1,1,0,0,0,0,0,0,0,0]];
for(var row=0;row<3;row++)
{
var dobj=document.createElement("div");
for(var i=0;i<10;i++)
{
var obj=document.createElement("input");
obj.type="checkbox";
obj.id="s"+row+i;
obj.addEventListener("click",findprice);
dobj.appendChild(obj);
if(seats[row][i]==1)
{
obj.disabled=true;
}
}
document.getElementById("bus").appendChild(dobj);
}
}
function findprice()
{
var amount=0;
for(var row=0;row<3;row++)
{
for(var col=0;col<10;col++)
{
var value=document.getElementById("s"+row+col).checked;
if(value)
amount+=250;
}
}
document.getElementById("price").innerHTML=amount;
}
</script>
</head>
<body onload="createseats()">
<h2>Seat Reservation</h2>
<div id="bus">
</div>
<h2 id="price"></h2>
</body>
</html>
Output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input{
}
</style>
<script>
function check()
{
//var
selected=document.getElementById("qual").value;
//alert(selected);
var details=[["Accounts","Science"],['B.A','B.Sc','B.Com','B.B.A','B.C.A'],['MCA','MSc','MCom']];
var selected=document.getElementById("qual").selectedIndex;
// console.log(selected);
var myarr=details[selected];
// console.log(myarr);
document.getElementById("dept").innerHTML=""; //clears
all the element inside the select
for(var i=0;i<myarr.length;i++)
{
var obj=document.createElement("option");
obj.text=myarr[i];
document.getElementById("dept").appendChild(obj);
}
}
</script>
</head>
<body>
<h2>Qualification</h2>
<div>
<select id="qual">
<option>XII</option>
<option>UG</option>
<option>PG</option>
</select>
<select id="dept">
</select>
</div>
<button onclick="check()">Load Details</button>
</body>
</html>
Output
0 comments:
Post a Comment