DOM elements access and JS performance
<p>I am trying to write web application in which i would need to remember the contents which are dynamically added. Basically the contents are getting added as a table row.</p>

<p>Now based on the AJAX request/response the status of the table cells is updated regularly. To achieve this i have created interface like structure which is returned to the caller function when the table row is created. This has references to various cells which i can update from the caller function. Here i am using closure extensively(i hope i am right with closure stuff).</p>

<pre><code>//All the efforts to call it like belowe
function init(){
    var userOne = addNewRow(data);
    .....
    ajax('/updatedata/someservice.xxx', function(dat){
        userOne.updateName(dat);
    });
}

//Caller function which is responsible to created and add new row
function addNewRow(data){
    ..
    ..
    var _intercace = addRow(data);
    ..
    ..
    return {
        _hadlerInterface = intercace;
    }
}

//function adds data row and provide interface so that 
//values can be updated using this interface at runtime
function addRow(data){
    var row = document.createElement("tr");

    var name = document.createElement("td");
    row.append(name);
    ..
    var address = document.createElement("td");
    row.append(address);
    ..
    ..
    ..
    // added the row to the intented UI table

    return {
        updateName: function(value){
            name.innerHTML = value;
        },
        ...
        ...
    };
}
</code></pre>

<p>Now question is that is it good to use this pattern or i should just stick to old getElementsById() and getElementsByTagName() by generating and maintaining the list of newly added/created rows considering philosophy that DOM access should be kept minimal.</p>

<p>Please let me know your design suggestions and feedback for the same.</p>
