Help creating new Divs with XML

[brianwhipp]

Hi, I'm trying to create a website that has a homepage that will initially be set up to read an XML file which is a list of the articles that should be displayed, and for every article in the list it will create a set of divs to display the content. I previously have no experience using XML files and I have been following the w3schools lessons on AJAX programming.

The problem is I expected the XML data to work like a dictionary. Am I incorrect that you can access an XML elements child nodes by name once the element is retrieved? Or maybe I just need to use a different language altogether like jquery. Someone showed me a jquery example here that I think could solve my problem:

jQuery.parseXML() | jQuery API Documentation

api.jquery.com

Anyway here is the code I'm trying to get to work. Also my other question is what language am I using here? Just pure html? If anyone could help with the code or has any suggestions it would be greatly appreciated. Thanks!

<!-- THIS IS THE BEGINNING OF THE ARTICLE CELL HOLDER AREA -->

<div id="bigbuttons" class="big-selection-buttons">

<!-- EXAMPLE ARTICLE -->

<div class="buttonCell">
<div class="topbubbles">
<div class="innerbubbles"><span style="font-size: 16pt; color: red;">FIRST ARTICLE!</span>
<div>AFreeSec.Com is on the interweb!!!</div>
</div>
</div>
<div class="leftheadshot"> </div>
<div class="d7">The hottest new site for conservatives on the net!</div>
</div>
<!-- END OF CELL -->

<!-- INSERT ARTICLE CODE -->

<script>
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "articleList_v4.xml", true);
  xmlhttp.send();


function myFunction(xml) {
  var x, a, i, xmlDoc, txt;
  xmlDoc = xml.responseXML;
  txt = "";

  a = xmlDoc.getElementsByTagName("article");
  for (i = 0; i< a.length; i++) {

<!--txt += a[i].childNodes[0].nodeValue + "<br>";-->


    var list = document.getElementById("bigButtons");

<!-- i feel like this line is not going to work because listRow is not defined?-->

    listRow = document.createElement("div");
    var topbid = a[i].getElementsByTagName("title")[0].firstChild.nodeValue+"buttonCell";
    listRow.id = a[i].getElementsByTagName("title")[0].firstChild.nodeValue+"buttonCell";
    listRow.className = "buttonCell";
    list.appendChild(listRow);

    var list1 = document.getElementById(topbid);
    listRow1 = document.createElement("div");
    listRow1.className = "topbubbles";
    list1.appendChild(listRow1);

    var list2 = document.getElementById(topbid);
    listRow2 = document.createElement("div");
    listRow2.className = "innerbubbles";
    listRow2.innerText = a[i].getElementsByTagName("title")[0].firstChild.nodeValue;

    list2.appendChild(listRow2);

var list3 = document.getElementById(topbid);
    listRow3 = document.createElement("div");
    listRow3.className = "leftheadshot";
    listRow3.style.background-image= a[i].getElementsByTagName("photo")[0].firstChild.nodeValue;

    list3.appendChild(listRow3);

var list4 = document.getElementById(topbid);
    listRow4 = document.createElement("div");
    listRow4.className = "d7";
    listRow4.innerText = a[i].getElementsByTagName("subheadline")[0].firstChild.nodeValue;

    list4.appendChild(listRow4);

<!-- here we can now create the div code and import the subtags of the article -->

<!-- EXAMPLE ARTICLE -->
<div class="buttonCell">
<div class="topbubbles">
<div class="innerbubbles"><span style="font-size: 16pt; color: red;">ANOTHER ARTICLE!</span>
<div>AFreeSec.Com is on the interweb!!!</div>
</div>
</div>
<div class="leftheadshot"> </div>
<div class="d7">The hottest new site for conservatives on the net!</div>
</div>
<!-- END OF CELL -->

  }



}
</script>

<!-- END OF ARTICLE CODE -->


<!-- THIS IS THE BEGINNING OF A CELL -->

<!-- EXAMPLE ARTICLE -->

<div class="buttonCell">
<div class="topbubbles">
<div class="innerbubbles"><span style="font-size: 18pt; color: red;">Last spot right here!</span>
<div>THE LAST ARTICLE</div>
</div>
</div>
<div class="centerheadshot"> </div>
<div class="d7">This will be the last article we ever publish... NOT!</div>
</div>
<!-- END OF CELL -->

<!-- END OF ARTICLE BUBBLE HODLER AREA -->
</div>