This how to add HTML elements and also assign different attributes to it

first we will create a div then add two text boxes with 1  delete  button

when you click delete button it will remove only that div including all HTML elements in it

also it does not use removeNode because it was not working with Firefox only IE so i had to re write the code to work with both major browsers i have not tested with safari or opera but it should work with them  also

first we create a HTML div box with two text boxes and 1 add button

<div id=”pdiv” class=”MiddleBox”>

<div id=”div1″>

<div class=”LeftColumn”>
txt1 : <input id=”txtRecName1″ name=”txtRecName1″ type=”text” class=”textboxsty” />
</div>

<div class=”RightColumn”>
txt2 : <input id=”txtRecEmail1″ name=”txtRecEmail1″ type=”text” class=”textboxsty” />

</div>

then  we  create a container variable which holds the value of parent div elements in this case it is “pdiv”

var container = document.getElementById(‘pdiv’);

then we create another div with in the  parent div elements and assigned it a ID

var div = document.createElement(“DIV”);
div.id = “div” + textId;

then we created three divs one for left textbox one for right textbox and one for the delete button  also assigned id’s and class to it  and added all three divs to “div” like this

var div1 = document.createElement(“DIV”);
div1.id = “DIV1-” + textId;
div1.innerHTML = “txt1 : “;
var first = document.createElement(“INPUT”);
first.setAttribute(“NAME”, “txtRecName” + textId);
first.className = ‘textboxsty’;
div1.appendChild(first);
div1.className = ‘LeftColumn’;

var div2 = document.createElement(“DIV”);
div2.id = “DIV2-” + textId;
div2.innerHTML = “txt2 : “;
var middle = document.createElement(“INPUT”);
middle.setAttribute(“NAME”, “txtRecEmail” + textId);
middle.className = ‘textboxsty’;
div2.appendChild(middle);
div2.className = ‘RightColumn’;

var btn = document.createElement(“INPUT”);

btn.type = “button”;
btn.value = “Delete”;
btn.className = ‘button1’;

btn.onclick = new Function(“removeElement(” + div.id + “);”);
var div3 = document.createElement(“DIV”);
div3.id = “DIV3-” + textId;
div3.className = ‘RightColumn’;
div3.appendChild(btn);

div.appendChild(div1);
div.appendChild(div2);

div.appendChild(div3);

and then  finally added  the sub div “div” to the parent “pdiv” container

container.appendChild(div);

also the delete button had a remove element function which is

function removeElement(divNum) {
var Node1 = document.getElementById(‘pdiv’);
Node1.removeChild(divNum);
}

complete HTML page will be

<html>
<head>
<title>Test Page</title>
<style type=”text/css” >

.LeftColumn
{
float:left;
padding-right: 5px;
padding-left: 5px;
}

.RightColumn
{
float:left;
padding-left: 15px;

}

.MiddleBox
{
text-align:left;
float: left;
border-right-style: solid;
border-left-style: solid;
border-bottom-style: solid;
border-top-style: solid;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-width: 1px;
border-right-color: #808080;
border-bottom-color: #808080;
border-left-color: #808080;
border-top-color: #808080;
padding: 7px;
width:490px;
font-family:Verdana;
font-size: 12px;
}
.textboxsty {
border:1px solid #CCCCCC;
BORDER-RIGHT: #CCCCCC 1px solid;
BORDER-TOP: #CCCCCC 1px solid;
FONT-SIZE: 12px;
BORDER-LEFT: #CCCCCC 1px solid;
BORDER-BOTTOM: #CCCCCC 1px solid;
FONT-FAMILY: Verdana;
BACKGROUND-COLOR: #ffffff;
}

.button1 {
border: 1px solid #ffffff;
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
CURSOR: hand;
BACKGROUND-COLOR: #f0f0f0;
font-family:Verdana;
color:#111111;
height: 18px;
}

</style>

<script language=”JavaScript” type=”text/javascript”>

var textId = 2;

function addInput() {
var container = document.getElementById(‘pdiv’);

var div = document.createElement(“DIV”);
div.id = “div” + textId;

var div1 = document.createElement(“DIV”);
div1.id = “DIV1-” + textId;
div1.innerHTML = “txt1 : “;
var first = document.createElement(“INPUT”);
first.setAttribute(“NAME”, “txtRecName” + textId);
first.className = ‘textboxsty’;
div1.appendChild(first);
div1.className = ‘LeftColumn’;

var div2 = document.createElement(“DIV”);
div2.id = “DIV2-” + textId;
div2.innerHTML = “txt2 : “;
var middle = document.createElement(“INPUT”);
middle.setAttribute(“NAME”, “txtRecEmail” + textId);
middle.className = ‘textboxsty’;
div2.appendChild(middle);
div2.className = ‘RightColumn’;

var btn = document.createElement(“INPUT”);

btn.type = “button”;
btn.value = “Delete”;
btn.className = ‘button1’;

btn.onclick = new Function(“removeElement(” + div.id + “);”);
var div3 = document.createElement(“DIV”);
div3.id = “DIV3-” + textId;
div3.className = ‘RightColumn’;
div3.appendChild(btn);

div.appendChild(div1);
div.appendChild(div2);

div.appendChild(div3);

var mdiv = document.createElement(“DIV”);
mdiv.id = “mdiv” + textId;
mdiv.setAttribute(“style”, “clear:both;height:10px”);

div.appendChild(mdiv);

container.appendChild(div);

textId++;
}

function removeElement(divNum) {
var Node1 = document.getElementById(‘pdiv’);
Node1.removeChild(divNum);
}
</script>
</head>

<body>
<form >
<div id=”pdiv” class=”MiddleBox”>

<div id=”div1″>

<div class=”LeftColumn”>
txt1 : <input id=”txtRecName1″ name=”txtRecName1″ type=”text” class=”textboxsty” />
</div>

<div class=”RightColumn”>
txt2 : <input id=”txtRecEmail1″ name=”txtRecEmail1″ type=”text” class=”textboxsty” />

</div>

<div class=”RightColumn”>
<input type=’button’ value=”  Add  ” onclick=”addInput();” class=”button1″ />
</div>

<div style=”clear:both; height:10px;” id=”mdiv1″></div>

</div>

</div>
</form>

</body>
</html>