JavaScript Beginner Tutorial: creating simple div class through javascript

create index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>creating simple div class through javascript</title>
</head>
<body>
<script type="text/javascript">

var div2 = document.createElement("div2");
var div3 = document.createElement("div3");
var div4 = document.createElement("div4");
div2.style.width = "200px";
div2.style.height = "200px";
div2.style.background = "#ccc";
div2.style.color = "white";
div2.style.textAlign = "center";
div2.style.float = "left";
div2.style.margin = "10px";
div2.innerHTML = "<h1>Hello</h1><br><p>javascript</p>";
document.body.appendChild(div2);

div3.style.width = "200px";
div3.style.height = "200px";
div3.style.background = "#ccc";
div3.style.color = "white";
div3.style.textAlign = "center";
div3.style.float = "left";
div3.style.margin = "10px";
div3.innerHTML = "<h1>Hello</h1><br><p>javascript</p>";
document.body.appendChild(div3);

div4.style.width = "200px";
div4.style.height = "200px";
div4.style.background = "#ddd";
div4.style.color = "#ccc";
div4.style.textAlign = "center";
div4.style.float = "left";
div4.style.margin = "10px";
div4.innerHTML = "<h1>Hello</h1><br><p>javascript</p>";
document.body.appendChild(div4);

var div = document.createElement("div");
div.style.width = "100%";
div.style.height = "500px";
div.style.background = "#333";
div.style.color = "white";
div.style.textAlign = "center";
div.style.margin = "auto";
/*div.innerHTML = "Hello";*/

document.body.appendChild(div);

</script>
</body>
</html>

Tuesday, 12 May 2015

creating simple div class through javascript

create index.html

No comments:

Post a Comment