pure javascript element creation & population

This one creates a UL & loops through a data object provided, for which it creates an LI for each item in the data object.

by Matt Rummler

HTML

<body>
  <section id='innerSection1' class='innerInfoPanel'>
      <header>
          This is the header
      </header>
      <div id='innerDiv1'>
        data should overwrite this
      </div>
  </section>
</body>

JavaScript

var TestDataObject = 
{
    item1:'Data for Item 1'
    ,item2:'Data for Item 2'
    ,item3:'Data for Item 3'
    ,item4:'Data for Item 4'
    ,item5:'Data for Item 5'
    ,item6:'Data for Item 6'
    ,item7:'Data for Item 7'
    ,item8:'Data for Item 8'
};
var DataOutputFormatting=
{
  //element class to a planned format for that class
    targetElement:{}
    ,dataList:function(serverData,targetElementID)
    {
      targetElementID=targetElementID || null;//['primaryTarget'];
      if(targetElementID)
      {
        DataOutputFormatting.targetElement=document.getElementById(targetElementID);
      }
      var newUL=document.createElement("ul");//,{class:"unmarkedList"});
      newUL.className='unmarkedList';
      Object.forEach(serverData,function(value,key)
      {
        var newLI=document.createElement("li");
        newLI.className='newli';
        var newLink=document.createElement("a");
        newLink.setAttribute('href','#innerSection1');
//        var textStr=document.createTextNode(value);
        newLink.textContent=value;//value;
        newLI.appendChild(newLink);//=newLink;
        newUL.appendChild(newLI);
      });
//      return newUL;
      DataOutputFormatting.targetElement.innerHTML='';
      DataOutputFormatting.targetElement.appendChild(newUL);
  }
  ,produceFormattedData:function(serverData,targetElementID)
  {
    var localContext=this;
//    formatType=formatType || 'labeledList';
    serverData=serverData || null;
    if(serverData)
    {
      var formattedData=null;
      formattedData=localContext.dataList(serverData,targetElementID);
    }
  }
};

Object.forEach=(function forEach()
{
  return function(obj,fn)
  {
    if(obj.length)
    {
      for (var i = 0, ol = obj.length, v = obj[0]; i < ol && fn(v, i) !== false; v = obj[++i]);
    }
	else
    {
      for (var p in obj) if (fn(obj[p], p) === false) break;
    }
  };
})(this);

DataOutputFormatting.produceFormattedData(TestDataObject,'innerDiv1');