createElement variable2

我需要在 SharePoint 2010 中创建导航 Web 部件。我使用表格来显示 SharePoint 列表中的项目，该表格的结构如下：

Column1 = 要显示的文本（标题） 第 2 列 = URL（标题链接）

我似乎无法弄清楚如何实现创建<a href></a>标记并将变量放在适当的位置。我不断得到的结果只是 HTML 标记<th>标签。我在谷歌上搜索了很多地方，但还没有找到好的答案。

下面的代码在使用变量打印表头方面工作得很好。然而，在印刷文本后面（theHeaderText）我想在其后面放置一个链接，以便当用户单击时，它会转到该链接。

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像这样：

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

一个更具交互性的例子：

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>