How to add new div using javascriprt?
Thanks in Advance
Srikanth
Printable View
How to add new div using javascriprt?
Thanks in Advance
Srikanth
You use use
HTMLElement.appendChild().
alternatively you can also try
document.createElement() in combination with document.insertBefore()
Thanks
Lokesh M.
The div tag is created dynamically by using document.createElement method of JavaScript.The object created by createElement method can access all the supported properties, functions and methods of document.documentElement method of JavaScript.
Example
<title>Javascript Create Div Element 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>
To add any element through JavaScript, you can use the method document.createElement("div"). And to set other attributes like "id" or "class" or to add text, this is the way to do it.
Here div2 is being appended inside div1. Simply to add a div, remove the line "div1.appendChild(dElement);"
[SIZE=5][HTML]
<div id="div1" class="samp">
<script type="text/javascript">
var dElement = document.createElement("div");
dElement.setAttribute("id","div2");
dElement.setAttribute("class","samp2");
dElement.innerHTML="this is div 2 "; /* to add text to div2 */
div1.appendChild(dElement);
</script>
</div> <!-- div1 ending -->
[/HTML][/SIZE]