create div element dynamically by using javascript

In this tutorial you will learn how to create div element dynamically by using javascript. We will do this by utilizing the DOM features of javascript. Let's have a look over example given below


Create div element dynamically by using javascript

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Create div element dynamically using javascript</title>

<style type="text/css">

.myDivClass
{
color: #999;

padding: 10px;

width: 250px;

height: 150px;

border: solid 1px #666;

}

</style>

<script type="text/javascript" language="javascript">

function CreateDivElement() {

var divElement = document.createElement("div");

divElement.id = "myDiv";

divElement.className = "myDivClass";

divElement.innerHTML = "Hello World!";
document.body.appendChild(divElement);

}

</script>

</head>

<body>

<div>

<input id="myBtn" type="button" value="Click Me" onclick="CreateDivElement();" />

</div>

</body>

</html>
And if you want to want to create div element inside any other html element of page body then nothing to worry. Let's suppose we have a div in our page which id is testDiv like given below
<div id="testDiv">
</div>
and you want to create div inside this testDiv. Just you have to change the last line of CreateDivElement() function from


document.body.appendChild(divElement);
to
document.getElementById('testDiv').appendChild(divElement);


and that's it. I hope you will like this tutorial.


Happy Coding, Keep Coding

0 comments: