title: createElement <a href=variable1>variable2</a>
body: <p>I have a requirement to create a navigation web part within SharePoint 2010. I am using a table to display the items from a SharePoint list and the table is structured as so:</p>
  
  <p>Column1 = The text to display (Title)
  Column2 = The URL (TitleLink)</p>
  
  <p>I cannot seem to figure out how to achieve creating the <code>&lt;a href&gt;&lt;/a&gt;</code> tag and put the variables inside the appropraite places. The result that I constantly end up getting is just the HTML markup in the <code>&lt;th&gt;</code> tags. I have searched in quite a few places on google and haven't came across a good answer yet. </p>
  
  <p>Below is the code that is working just fine in regards to printing my table headers with the variables. However, behind that printed text (<code>theHeaderText</code>) I want to put a link behind it so when the user clicks, it goes to that link.</p>
  
  <pre><code>var siteUrl = '/sites/dev/';
  var theCounter = 0;
  ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
  
  function retrieveListItems() {
  var clientContext = new SP.ClientContext(siteUrl);
  var oList = clientContext.get_web().get_lists().getByTitle('myList');
  var camlQuery = new SP.CamlQuery();
  camlQuery.set_viewXml("&lt;Where&gt;&lt;And&gt;&lt;IsNotNull&gt;&lt;FieldRef Name='Title' /&gt;&lt;/IsNotNull&gt;    &lt;IsNotNull&gt;&lt;FieldRef Name='TitleLink' /&gt;&lt;/IsNotNull&gt;&lt;/And&gt;&lt;/Where&gt;");
  this.collListItem = oList.getItems(camlQuery);
  clientContext.load(collListItem);
  clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),     Function.createDelegate(this, this.onQueryFailed));
  }
  
  function onQuerySucceeded(sender, args) 
  {
  var listItemEnumerator = collListItem.getEnumerator();
      while (listItemEnumerator.moveNext()) 
      {
      var oListItem = listItemEnumerator.get_current();
  
      //Each column in in the SharePoint List will essentially become an array.
      //So make an array for each column that will be returned!
  
      var theHeaders = new Array();
      var HeaderLinks = new Array();
      theCounter += 1;
      theHeaders[theCounter - 1] = oListItem.get_item('Title');
      HeaderLinks[theCounter - 1] = oListItem.get_item('TitleLink');
  
      //Get the Table Element created in HTML
      var getTheTableTag = document.getElementById('theTable');
  
  
      //Create the headers (top level links)
      var createTheHeaderElements = document.createElement('th');
      createTheHeaderElements.id = 'headerTag';
      var theHeaderText = document.createTextNode(theHeaders[theCounter - 1]);
      createTheHeaderElements.appendChild(theHeaderText);
      getTheTableTag.appendChild(createTheHeaderElements);
  
  };
  }
  function onQueryFailed(sender, args) {
  alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
  }
  </code></pre>