Dynamic Html

Dynamic HTML, or DHTML, is a collection of technologies used together to create interactive and animated web sites.

Dynamic Html use Html,javascript,css,Document Object Model.

Nowadays dynamic html heavily used in dynamic website.

To create a dynamic html first you have to create a body object

var body = document.getElementsByTagName("body")[0];=>get the reference for the body

If a document need to keep more than one dynamic html at that moment we just keep a table tag and inside of it take a tbody tag with a specific id.

In the form we can do this..

<table> <tbody id="DynamicElementID"></tbody> </table> objTBody = eval(document.getElementById('DynamicElementID'));

Now we will use the above tbody object to append the child.

In case of mozila we use createElementNS() and for other createElement()

createElementNS() method creates an element node with a namespace.

createElementNS(ns,name)

Where ns =A string that specifies the namespace name for the element node

name =A string that specifies the name for the element node

Here we have to remember one thing:- thead,tbody,tfoot all are append with table.

Where thead is used for table header

tbody is used for table body

tfoot is used for table footer

One Example has been given bellow how to create dynamic html?

var tbl = document.createElement("table"); =>creates a table element.

var tblBody = document.createElement("tbody");=>creates a tbody element.

var row = document.createElement("tr");=>creates a table row.

var cell = document.createElement("td");=>Create a element cell that mean table column.

var cellText = document.createTextNode("Text");=>Create a node and make the text.

Now we will append element with its parrent.

cell.appendChild(cellText);=>Append text to the td

row.appendChild(cell);=>Append td to the row.

tblBody.appendChild(row);=>Append row to the table body.

tbl.appendChild(tblBody);=>Append table body to the table.

body.appendChild(tbl);=>Append table to the body.

tbl.setAttribute("border", "2");=>sets the border attribute of tbl to 2.

We can dynamically also create html control like the following way.

Create TextBox Control

objTextBoxNode = document.createElement("input");

objTextBoxNode.id = "txtName";

objTextBoxNode.value = "Priyabrata";

In the above syntax a TextBox element will be created with the id ="txtName" and value =Priyabrata.

Create CheckBox Control.

objCheckBoxNode = document.createElement("input");

objCheckBoxNode.id = "chkName";

objCheckBoxNode.value = "Yes";

objCheckBoxNode.checked = true;

In the above syntax a CheckBox element will be created with the id ="chkName" and value =Yes.It is by default checked.

Create Button Control.

objButtonNode = document.createElement("input");

objButtonNode.id = "btnName";

objButtonNode.value = "Add";

objButtonNode.onclick = function addFunction(){} Here we can write down the add syntax

In the above syntax a Button element will be created with the id ="btnName" and value ="Add".Here also attach a onclick event which call a function addFunction().

To Remove a element from the dynamic component we have to reach their top most parent and remove the required html component.

Note:At the time of remove a dynamic component we have to rememebr that if we want to remove that dynamic component then instead of declare the component as object we have to declare it as var otherwise we will get an exception and no component will be deleted.

For example

objDivElement = documents.getElementsByTagName("div");

here we create div object.

To get how many div element of a document we can use.

objLength = objDivElement.length;

How to create a clone node of an object

Suppose we want to create a clone node of objDivElement then...

objCloneNode = document.cloneNode(objDivElement);

objCloneNode.style.position = 'absolute';

objCloneNode.style.top = parseInt(startY) + 'px';

objCloneNode.style.left = parseInt(startX) + 'px';

document.body.appendChild(objCloneNode);

document.onmousemove = Drag;

document.onmouseup = Drop;