getElementById('variableName') loop breaking

Question

/*
 * Helper Functions
 */
function setAttributes(el, attrs) {
  for(var key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
}

/*
 * Create div(s) from Object with style properties
 */
Layer.prototype.createEl = function(object, target, className) {
    count = 1;
    for(e in object) {
        var newElement = document.createElement("div")
        newElement.id = e;
        setAttributes(newElement, { 
          "class" : className, 
          "data-name" : e, 
          "data-order" :  count
        });

        for(x in object[e]) {
            newElement.style[x] = object[e][x];
        }

        target.appendChild(newElement);
        count++;
    }
}


if (typeof authorized !== "undefined" && app.identify()) 
{
    app.createEl(app.identify().containers, document.body, "layerFrame");
    for(e in app.identify().containers) {
        app.createEl(app.identify().framing, document.getElementById(e), "framework");
    }
}

app.identify() returns a JSON object. The .containers portion looks like this:

"containers" : {
    "master" : {
        "position" : "fixed",
        "width" : "150px",
        "height" : "200px",
        "bottom" : "0px",
        "right" : "100px",
        "background" : "yellow"
    },
    "response" : {
        "display" : "none",
        "position" : "fixed",
        "width" : "150px",
        "height" : "200px",
        "bottom" : "0px",
        "right" : "100px",
        "background" : "teal"
    }
},

The area that breaks is the 3rd last line of code where I'm calling the app.createEl function. Specifically the getElementById(e) portion.

If I console.log 'e', it returns "master" and "response" as expected.

And if I hard-code in document.getElementById("master") instead of document.getElementById(e), everything works as I want it to.

But when I run it with 'e', I get "Uncaught TypeError: Cannot call method 'appendChild' of null"

typeof(e) = a string, why does this break when I use getElementById(e)?

ANSWER

Not sure if this is relevant to anyone, but the issue was calling the function createEl(object, target, className) and passing in document.getElementById() for the target argument directly. All I did was assign document.getElementById() to a variable, then called createEl() and passed in that variable for the target argument:

for(e in app.identify().containers) 
{
    tmp = document.getElementById(e);
    app.createEl(app.identify().framing, tmp, "framework");
}

Answer 1

Well, man, I've created a FIDDLE simulating what you're saying, but the document.getElementById(e) is working pretty well here.

If you show us what is the "app.identify().framing" thing, I can try to simulate what you're doing.

EDIT:

After you showed what's the framing thing, I've updated my FIDDLE, and it's still working pretty well. Probably, your app.identity() is not the Javascript Object you expected.

var json =  {
    "containers" : {
        "master" : {
            "position" : "fixed",
            "width" : "150px",
            "height" : "200px",
            "bottom" : "0px",
            "right" : "100px",
            "background" : "yellow"
        },
        "response" : {
            "display" : "none",
            "position" : "fixed",
            "width" : "150px",
            "height" : "200px",
            "bottom" : "0px",
            "right" : "100px",
            "background" : "teal"
        }
    },
    "framing" : {
        "header" : {
            "width" : "150px",
            "height" : "100px",
            "background" : "pink",
            "display" : "none"
        },
        "contentTop" : {
            "width" : "150px",
            "height" : "100px",
            "background" : "purple"
        },
        "contentBottom" : {
            "width" : "150px",
            "height" : "100px",
            "background" : "green"
        },
        "footer" : {
            "width" : "150px",
            "height" : "100px",
            "background" : "blue"
        }
    }
};

function setAttributes(el, attrs) {
  for(var key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
}

var createEl = function(object, target, className) {
    count = 1;
    for(e in object) {
        var newElement = document.createElement("div")
        newElement.id = e;
        setAttributes(newElement, { 
          "class" : className, 
          "data-name" : e, 
          "data-order" :  count
        });

        for(x in object[e]) {
            newElement.style[x] = object[e][x];
        }

        target.appendChild(newElement);
        count++;
    }
}

createEl(json.containers, document.body, "layerFrame");
for(e in json.containers) {
    createEl(json.framing, document.getElementById(e), "framework");
}