jQuery element creation & population NOT WORKING!!!
This one creates a UL & loops through a data object provided, for which it creates an LI for each item in the data object & puts it's data in a <a href=> inside the LI.
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'];
var internalTarget={};
if(targetElementID)
{
internalTarget=DataOutputFormatting.targetElement=$('#'+targetElementID);
//doesn't work: internalTarget.innerHTML='THIS IS A TEST TO OVERWRITE THE innerHTML of '+targetElementID;//('THIS IS A TEST
internalTarget.html('THIS IS A TEST TO OVERWRITE THE innerHTML of '+targetElementID);
var newElement=$('div',{class:'fancyDiv',id:'div0',value:'TEST TEXT'});
newElement.text('Test from the generated div with ID=div0');//);
// newElement.appendTo(internalTarget);
// internalTarget.insertAdjacentHTML('afterend',newElement);
internalTarget.html(newElement);
// $('div',{class:'fancyDiv',id:'div0'}).appendTo(internalTarget);
// internalTarget.text(newElement);
// internalTarget.insertAdjacentHTML('beforeend',newElement);
}
var newUL=document.createElement("ul");//,{class:"unmarkedList"});
newUL.className='unmarkedList';
Object.forEach(serverData,function(value,key)
{
var newLI=$("li",{class:"newli"});
var newLink=$("a",{href:"#innerSection1"});
// this.text('<a href=#contactForm'+finalText+'</a>');
var textStr=document.createTextNode(value);
//alert('this is right after everything is created & right before they start getting assigned to other elements');
newLink.text(value);//value;
// newLink.appendTo('#'+targetElementID);
// ...