Javascript: Add Remove HTML elements
You can add html elements dynamically with Javascript. In this article, I will show you how to do so. I have created two Javascript functions. One for creating html elements and the other for removing them.
In my html elements, I have created ‘li’ and ’strong’ elements inside ‘div’. The div id is ’summary’. I have written comment in the code so that it would be easy to understand.
Javascript function to create html elements:-
function createSummary(title,content) {
// get div id
var summaryOptions = document.getElementById('summary');
// create new <li>
var newLi = document.createElement('li');
var liIdName = title;
// set <li> attribute id
newLi.setAttribute('id',liIdName);
// create new element <strong>
var newStrong = document.createElement('strong');
var strongIdName = title+" strong";
// assign id to <strong>
newStrong.setAttribute('id',strongIdName);
// adding parameter 'title' value inside <strong>
newStrong.innerHTML = title;
// adding <strong> inside div
summaryOptions.appendChild(newStrong);
// adding parameter 'content' value inside <li>
newLi.innerHTML = content;
// adding <li> inside div
summaryOptions.appendChild(newLi);
}
Javascript function to remove html elements:-
function removeSummary(title) {
var summaryOptions = document.getElementById('summary');
var childLi = document.getElementById(title);
var childStrong = document.getElementById(title+" strong");
// remove <li>
if(childLi) {
summaryOptions.removeChild(childLi);
}
// remove strong <strong>
if(childStrong) {
summaryOptions.removeChild(childStrong);
}
}
Full code is as under:-
<html>
<head>
<title>Test</title>
<script language="javascript" type="text/javascript">
function createSummary(title,content) {
// get div id
var summaryOptions = document.getElementById('summary');
// create new <li>
var newLi = document.createElement('li');
var liIdName = title;
// set <li> attribute id
newLi.setAttribute('id',liIdName);
// create new element <strong>
var newStrong = document.createElement('strong');
var strongIdName = title+" strong";
// assign id to <strong>
newStrong.setAttribute('id',strongIdName);
// adding parameter 'title' value inside <strong>
newStrong.innerHTML = title;
// adding <strong> inside div
summaryOptions.appendChild(newStrong);
// adding parameter 'content' value inside <li>
newLi.innerHTML = content;
// adding <li> inside div
summaryOptions.appendChild(newLi);
}
function removeSummary(title) {
var summaryOptions = document.getElementById('summary');
var childLi = document.getElementById(title);
var childStrong = document.getElementById(title+" strong");
// remove <li>
if(childLi) {
summaryOptions.removeChild(childLi);
}
// remove <strong>
if(childStrong) {
summaryOptions.removeChild(childStrong);
}
}
</script>
</head>
<body>
<input type="button" value="Show" onclick="createSummary('This is title','This is content.')" />
<input type="button" value="Remove" onclick="removeSummary('This is title')" />
<div id="summary" style="border:1px solid #CCCCCC; width:400px; ">&nbsp;</div>
</body>
</html>
Leave your response!