How to Add and Remove HTML elements Dynamically In Javascript?

**Level8** · 20-02-2010

Hello, I am using javascript in my project and while creating it, I want to Add and Remove HTML elements Dynamically with Javascript. I have search regarding it, But, I am not able to get the solution for it. If anyone knows how to How to Add and Remove HTML elements Dynamically In Javascript, then please reply me about it and solve my problem. Reply me as soon as possible as due to this problem I am not able to move forward in my project.

**Praetor** · 20-02-2010

Hello, you must need to make use of the code below for your purpose which is in XHTML. So, just use it and get your problem solved:

Code:

<input type="hidden" value="0" id="theValue" />
<p><a href="javascript:;" onclick="AddDynamicElement();">Add all of the elements dynamically</a></p>
<div id="DivID"> </div>

**Katty** · 20-02-2010

Hello, I have a javascript function which can be useful for getting the add and remove HTML elements dynamically. So, just make use of it and then you will able to get the solution for your problem:

Code:

function AddDynamicElement() 
{
  var First = document.getElementById('myDiv');
  var Second = document.getElementById('theValue');
  var Number = (document.getElementById('theValue').value -1)+ 2;
  Second.value = Number;
  var DivID = document.createElement('div');
  var DivName = 'my'+Number+'Div';
  DivID.setAttribute('id',DivName);
  DivID.innerHTML = 'Element Number '+Number+' has been added! <a href=\'#\' onclick=\'removeElement('+DivName+')\'>Remove the div "'+DivName+'"</a>';
  First.appendChild(DivID);
}

**kelfro** · 20-02-2010

Hi, I think you must need to make use of the different javascript books for getting your problem solved. I have list of some of the best books as below which can help you to achieve it:

Core JavaScript Reference (vesion 1.5)
Sams Teach Yourself JavaScript in 24 Hours
Designing with JavaScript, 2nd Edition
JavaScript Programmer's Reference
JavaScript: The Definitive Guide
The JavaScript Bible

**Zecho** · 20-02-2010

Hi, I know the code from which you can simply able to remove the elements dynamically and get to remove the elements dynamically. If you make use of it, then you will able to get the solution for your removing html elements dynamically:

Code:

function deleteElement(divNum) 
{
  var delete = document.getElementById('DivID');
  var olddiv = document.getElementById(divNumber);
  delete.removeChild(Older);
}

**Modifier** · 20-02-2010

Hello, if you want to add and remove the HTML elements Dynamically then you must need to make use of the program below:

Code:

var doc = 
{
get: function(element) 
{
if (typeof element === 'string') 
{
return document.getElementById(element);
} 
else
{
return element;
}
},
add: function(element, destination) 
{
var element = this.get(element);
var destination = this.get(destination);
destination.appendChild(element);
},
remove: function(element) 
{
var element = this.get(element);
element.parentNode.removeChild(element);
}
};
var Event = 
{
add: function() 
{
if (window.addEventListener)
 {
return function(element, type, function) 
{
doc.get(element).addEventListener(type, function, false);
};
} 
else if (window.attachEvent) 
{
return function(element, type, function) 
{
var f = function() 
{
function.call(doc.get(element), window.event);
};
doc.get(element).attachEvent('on' + type, f);
};
}
}()
};
Event.add(window, 'load', function() 
{
var i = 0;
Event.add('add-element', 'click', function() 
{
var element = document.createElement('p');
element.innerHTML = 'Remove This Element (' + ++i + ')';
doc.add(element, 'content');
Event.add(element, 'click', function(e) 
{
doc.remove(this);
});
});
});