createElement variable2

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

mwilson · Accepted Answer · 2019-01-18T16:35:22.333

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>

score 3 · Answer 2 · edited Apr 22 '17 at 04:46

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>

score 1 · Answer 3 · answered Aug 29 '13 at 01:39

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

createElement variable2

3 Answers3

Linked