createElement <a href=variable1>variable2</a>

Question

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:

Column1 = The text to display (Title) Column2 = The URL (TitleLink)

I cannot seem to figure out how to achieve creating the <a href></a> tag and put the variables inside the appropraite places. The result that I constantly end up getting is just the HTML markup in the <th> tags. I have searched in quite a few places on google and haven't came across a good answer yet.

Below is the code that is working just fine in regards to printing my table headers with the variables. However, behind that printed text (theHeaderText) I want to put a link behind it so when the user clicks, it goes to that link.

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("<Where><And><IsNotNull><FieldRef Name='Title' /></IsNotNull>    <IsNotNull><FieldRef Name='TitleLink' /></IsNotNull></And></Where>");
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());
}

Answer 1

Use setAttribute like this:

        var createA = document.createElement('a');
        var createAText = document.createTextNode(theCounter);
        createA.setAttribute('href', "http://google.com");
        createA.appendChild(createAText);
        getTheTableTag.appendChild(createA);

A more interactive example:

const insertButton = document.getElementById('insertButton');

const appendAnchorTag = () => {
  const anchor = document.createElement('a');
  const list = document.getElementById('linksList');
  const li = document.createElement('li');
  anchor.href = 'http://google.com';
  anchor.innerText = 'Go to Google';
  li.appendChild(anchor);
  list.appendChild(li);
};

insertButton.onclick = appendAnchorTag;

<button id="insertButton">Create New Anchor Tag</button>

<ul id="linksList"></ul>