CreateElement <a href= https://stackoverflow.com/variable1 rel="nofollow noreferrer"> variable2 </a>
I have a requirement to create a navigation web part in SharePoint 2010. I use a table to display items from a SharePoint list, and the table is structured like this:
Column1 = display text (title) Column2 = URL (TitleLink)
I cannot figure out how to achieve the creation of the <a href></a> tag and put the variables in appropriate places. The result that I constantly get is only the HTML markup in the <th> tags. I have searched in several places on google and have not yet found a good answer.
Below is the code that works great regarding printing my table headers with variables. However, behind this printed text ( theHeaderText ) I want to put a link behind it, so when the user clicks, he 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()); } Use setAttribute as follows:
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> Thanks mwilson
Here is another code example
Change
<body> to <body id="myBody"> Add to your body:
<button onclick="outputFunction()" >click me</button> Then add the 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> You can use td instead of th since the link is in bold by 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);