How do you store object references in HTML elements?

Question

I am building a form in HTML out of a javascript object that I've imported from a JSON file. I use a recurisve algorithm to build HTML tables, and respective elements (labels, text boxes, etc.) The fields load with the value of the current node.

The idea is to edit the values in the textboxes; which in turn updates the javascript object. When changes have been made, the editor will send the JSON object to the server and update the file.

The puzzling question, is how do I reference the node that has been changed? I have tried several approaches to no avail.

EDIT:

This is a basic idea of what I'm doing:

function build_tree(obj, depth) {
    for (key in obj) {
        if (typeof(obj[key]) == 'object') {
            print(key + "<input type="text" value='" + obj[key] + "'>");
            build_tree(obj[key], depth + 1);
        } else 
            print(key + "<input type="text" value='" + obj[key] + "'>");
}

Now, how do I bind the value of obj[key] to the text boxes, so that when I change the value it updates the Javascript object?

Answer 1

document.getElementById('name').changed = true;

So now the DOM element has the property 'changed'. You can also use any other value (dates, arrays, etc)