JavaScript

Javascript Append Div Content Dynamically


<html>
<head>
<title>Javascript Append Div Content Dynamically</title>

<style type=”text/css”>

.dynamicDiv {
width:200px;
height:100px;
border:solid 1px #c0c0c0;
background-color:#e1e1e1;
font-size:11px;
font-family:verdana;
color:#000;
padding:5px;

}

</style>

<script type=”text/javascript” language=”javascript”>
function createDiv()
{
var divTag = document.createElement(“div”);

divTag.id = “div1”;

divTag.setAttribute(“align”,”center”);

divTag.style.margin = “0px auto”;

divTag.className =”dynamicDiv”;

divTag.innerHTML = “This <b>HTML Div tag</b> is created using Javascript DOM dynamically.”;

document.body.appendChild(divTag);

var pTag = document.createElement(“p”);

pTag.setAttribute(“align”,”center”);

pTag.innerHTML = “This paragraph <b>HTML p tag</b> is added dynamically inside the div tag.”;

document.getElementById(“div1″).appendChild(pTag);
}

</script>

</head>
<body>

<p align=”center”>
<b>Click this button to Create and Append the Div content:</b>
<input id=”btn1″ type=”button” value=”create div” onclick=”createDiv();” />
</p>

</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s