Security Simplified

DOM Manipulation Using createElement, appendChild, insertBefore, removeChild, etc

Example #1

This example shows the modification of the DOM for the contacts table. Both addition and replacement actions occur.

Contact Input

Contact List

FOREACH Loop Code Snippet

function updateTable() {
    var table = document.getElementById('contact_list');
    var div = document.getElementById('contact_list_div');
    var contactList = JSON.parse(localStorage.getItem("contactList"));
    var newTable = document.createElement('table');
    newTable.id = 'contact_list';
    var newTableHead = document.createElement('thead');
    var newTableHeadRow = document.createElement('tr');
    var newTableHeadName = document.createElement('th');
    newTableHeadName.appendChild(document.createTextNode('Name'));
    var newTableHeadPhone = document.createElement('th');
    newTableHeadPhone.appendChild(document.createTextNode('Phone'));
    var newTableHeadAddress = document.createElement('th');
    newTableHeadAddress.appendChild(document.createTextNode('Address'));
    var newTableHeadEmail = document.createElement('th');
    newTableHeadEmail.appendChild(document.createTextNode('Email'));
    var newTableHeadAction = document.createElement('th');
    newTableHeadAction.appendChild(document.createTextNode('Action'));

    newTableHeadRow.appendChild(newTableHeadName);
    newTableHeadRow.appendChild(newTableHeadPhone);
    newTableHeadRow.appendChild(newTableHeadAddress);
    newTableHeadRow.appendChild(newTableHeadEmail);
    newTableHeadRow.appendChild(newTableHeadAction);

    newTableHead.appendChild(newTableHeadRow);
    var newTableBody = document.createElement('tbody');

    if(contactList !== null) {
        var count = 0;
        contactList.forEach(function(rowData) {
            var row = document.createElement('tr');

            var nameCell = document.createElement('td');
            nameCell.appendChild(document.createTextNode(rowData.name));
            row.appendChild(nameCell);
            var phoneCell = document.createElement('td');
            phoneCell.appendChild(document.createTextNode(rowData.phone));
            row.appendChild(phoneCell);
            var addressCell = document.createElement('td');
            addressCell.appendChild(document.createTextNode(rowData.address));
            row.appendChild(addressCell);
            var emailCell = document.createElement('td');
            emailCell.appendChild(document.createTextNode(rowData.email));
            row.appendChild(emailCell);
            var actionCell = document.createElement('td');
            actionCell.innerHTML = "";
            row.appendChild(actionCell);
            newTableBody.appendChild(row);
            count++;
        });
    }

    newTable.appendChild(newTableHead);
    newTable.appendChild(newTableBody);
    div.replaceChild(newTable, table);
}