Welcome to designers dairy blog, here
we are going to discuss about, how to add the content dynamically using java script.
While clicking the submit button content to display and label to be change overlay. when clicking the overlay button transparent background should appear.
Step1:
We are creating div and storing in variable div var div = document.createElement('div');
Adding the class to the created div by giving div.className = 'row'; and adding the content using
div.innerHTML = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
now we are appending div by using document.body.appendChild(div);
Step2:
Scenario is content should be shown below the button so we have to use insertBefore syntax.
document.body.insertBefore(div, document.body.firstChild);
Step3:
Important thing is dom should be loaded after that script should be executing, for that we are using
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var x = document.getElementById("myButton1");
x.addEventListener("click", addContent);
});
Step4:
Creating the submit button dynamically
function addButton() {
var divbutton = document.createElement('div');
divbutton.innerHTML = '<button type="submit" id="myButton1" value="">Submit</button>';
document.body.appendChild(divbutton);
}
Step5:
while calling the add function we have to check the if innerHTML is Submit { executed code} or
apply color { document.getElementsByClassName("row")[0].style.cssText += 'background-color: #000; opacity:0.5'};
Step6:
Entire Script
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.row
{
background-color:red;
color:#fff;
line-height:24px;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
//do work
addButton();
var x = document.getElementById("myButton1");
x.addEventListener("click", addContent);
//x.addEventListener("click", overlay);
});
function addContent() {
var dip = document.getElementById("myButton1").innerHTML;
if( dip==="Submit")
{
var div = document.createElement('div');
div.className = 'row';
div.innerHTML = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
document.body.appendChild(div);
document.body.insertBefore(div, document.body.firstChild);
document.getElementById("myButton1").innerHTML="Add overlay";
}
else
{
document.getElementsByClassName("row")[0].style.cssText += 'background-color: #000; opacity:0.5';
}
}
function addButton() {
var divbutton = document.createElement('div');
divbutton.innerHTML = '<button type="submit" id="myButton1" value="">Submit</button>';
document.body.appendChild(divbutton);
}
</script>
</head>
<body>
</body>
</html>
Enjoy Folks
While clicking the submit button content to display and label to be change overlay. when clicking the overlay button transparent background should appear.
Step1:
We are creating div and storing in variable div var div = document.createElement('div');
Adding the class to the created div by giving div.className = 'row'; and adding the content using
div.innerHTML = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
now we are appending div by using document.body.appendChild(div);
Step2:
Scenario is content should be shown below the button so we have to use insertBefore syntax.
document.body.insertBefore(div, document.body.firstChild);
Step3:
Important thing is dom should be loaded after that script should be executing, for that we are using
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var x = document.getElementById("myButton1");
x.addEventListener("click", addContent);
});
Step4:
Creating the submit button dynamically
function addButton() {
var divbutton = document.createElement('div');
divbutton.innerHTML = '<button type="submit" id="myButton1" value="">Submit</button>';
document.body.appendChild(divbutton);
}
Step5:
while calling the add function we have to check the if innerHTML is Submit { executed code} or
apply color { document.getElementsByClassName("row")[0].style.cssText += 'background-color: #000; opacity:0.5'};
Step6:
Entire Script
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.row
{
background-color:red;
color:#fff;
line-height:24px;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
//do work
addButton();
var x = document.getElementById("myButton1");
x.addEventListener("click", addContent);
//x.addEventListener("click", overlay);
});
function addContent() {
var dip = document.getElementById("myButton1").innerHTML;
if( dip==="Submit")
{
var div = document.createElement('div');
div.className = 'row';
div.innerHTML = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
document.body.appendChild(div);
document.body.insertBefore(div, document.body.firstChild);
document.getElementById("myButton1").innerHTML="Add overlay";
}
else
{
document.getElementsByClassName("row")[0].style.cssText += 'background-color: #000; opacity:0.5';
}
}
function addButton() {
var divbutton = document.createElement('div');
divbutton.innerHTML = '<button type="submit" id="myButton1" value="">Submit</button>';
document.body.appendChild(divbutton);
}
</script>
</head>
<body>
</body>
</html>
Enjoy Folks
No comments:
Post a Comment