Question

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

Column1 =要显示的文字（标题） Column2 = URL（TitleLink）

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

下面是在使用变量打印表头时工作得很好的代码。但是，在该打印文本（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());
}

Answer 1

像这样使用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>

Answer 2

感谢mwilson

这是另一个代码示例

更改

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

添加到您的身体：

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

然后在正文外添加一个脚本

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

Answer 3

您可以使用td而不是th，因为默认情况下链接是粗体：

    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 <a href="variable1">variable2</a>

3 个答案: