18

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());
}

3 Answers 3

35

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>

3

Thanks to mwilson

Here is another code sample

Change

<body>  to  <body id="myBody">

Add to your body:

<button onclick="outputFunction()" >click me</button>

Then add a script outside the body

<script type="text/javascript">

function outputFunction() {
    var myBodyId = document.getElementById("myBody");   
    var newBaitTag = document.createElement('a');
    var newBaitText = document.createTextNode("Bonus Click");
    newBaitTag.setAttribute('href', "https://www.youtube.com/watch?v=dQw4w9WgXcQ");
    // we create new things above

    // we append them to the page body below
    newBaitTag.appendChild(newBaitText);
    myBodyId.appendChild(newBaitTag);    
}

</script>
1

You can make use of td instead of th as the link is bolded as default:

    var createTheHeaderElements = document.createElement('td');
    createTheHeaderElements.id = 'headerTag';
    var link = document.createElement('a');
    var theHeaderText = document.createTextNode(theHeaders[theCounter - 1]);
    link.setAttribute("href","www.google.com");
    link.appendChild(theHeaderText);
    createTheHeaderElements.appendChild(link);
    getTheTableTag.appendChild(createTheHeaderElements);

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.