Javascript: Add Remove HTML elements

Facebook Tweet LinkedIn Pin Print EmailShares

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; "> </div>

</body>
</html>

Thanks.

Related posts: