Generate a legend for a map... updated to not require jquery

maplegend.js

function MapLegendView(el, values, headerText, footerText){
    /*
    Class to dynamically generate a legend for a given map
    el: containing element
    values: array of key, value objects
        ex: var legendItems = [
            {text: 'text to display next to color', colorStr: 'color of legend item (hex preferred)'},
        ]
    you'll want your container element and map to be contained in the same parent element
    and to position the containing element to float over the map like so:
        #map{
            width: 100%;
            height: 100%;
            background-color: white;
        }
        #el{
            width: 50px;
            height: 120px;
            position: absolute;
            z-index: 120;
            bottom: 0;
            float: left;
            padding: 10px;
            border: solid 1px black;
        }
    */
    this.el = document.getElementById(el);
    this.values = values;
    this.headerText = headerText;
    this.footerText = footerText;
    this.render();
}
MapLegendView.prototype = new Object();
MapLegendView.prototype.render = function() {
    var header = document.createElement("div");
    header.innerText = this.headerText;
    var footer = document.createElement("div");
    header.innerText = this.footerText;
    header.fontSize = ".5em";
    this.el.appendChild(header);
    var containerDiv = document.createElement("div");
    for(var i = 0; i < this.values.length; i++){
        var obj = this.values[i];
        var subContainer = document.createElement("div");
        subContainer.style.height = "20px";
        subContainer.style.width = "100%";
        var colorDiv = document.createElement("div");
        colorDiv.style.backgroundColor = obj.colorStr;
        colorDiv.style.width = "3px";
        colorDiv.style.height = "3px";
        colorDiv.style.padding = "5px";
        colorDiv.style.float = "left";
        colorDiv.style.position = "absolute";
        colorDiv.style.paddingRight = "5px";
        var infoDiv = document.createElement("div");
        infoDiv.style.height = "10px";
        infoDiv.style.position = "absolute";
        infoDiv.style.float = "right";
        infoDiv.style.paddingLeft = "23px";
        infoDiv.style.fontsize = ".75em";
        infoDiv.innerText = obj.text;
        subContainer.appendChild(colorDiv);
        subContainer.appendChild(infoDiv);
        containerDiv.appendChild(subContainer);
    }
    this.el.appendChild(containerDiv);
    this.el.appendChild(footer);
};