createElement< a href = variable1> variable2< / a> [英] createElement <a href=variable1>variable2</a>

问题描述

我需要在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）; 
 
函数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>< And< FieldRef Name ='Title'/>< / IsNotNull>< IsNotNull>< FieldRef Name ='TitleLink'/ >< / IsNotNull>< /和大于;< /何处>中）; 
 this.collListItem = oList.getItems（camlQuery）; 
 clientContext.load（collListItem）; 
 clientContext.executeQueryAsync（Function.createDelegate（this，this.onQuerySucceeded），Function.createDelegate（this，this.onQueryFailed））; 
 
 
函数onQuerySucceeded（sender，args）
 {
 var listItemEnumerator = collListItem.getEnumerator（）; 
 while（listItemEnumerator.moveNext（））
 {
 var oListItem = listItemEnumerator.get_current（）; 
 
 //在SharePoint列表中的每一列都将成为一个数组。 
 //所以为每个将返回的列创建一个数组！ 
 
 var theHeaders = new Array（）; 
 var HeaderLinks = new Array（）; 
 theCounter + = 1; 
 theHeaders [theCounter  -  1] = oListItem.get_item（'Title'）; 
 HeaderLinks [theCounter  -  1] = oListItem.get_item（'TitleLink'）; 
 
 //获取在HTML 
中创建的表格元素var getTheTableTag = document.getElementById（'theTable'）; 
 
 
 //创建标题（顶级链接）
 var createTheHeaderElements = document.createElement（'th'）; 
 createTheHeaderElements.id ='headerTag'; 
 var theHeaderText = document.createTextNode（theHeaders [theCounter  -  1]）; 
 createTheHeaderElements.appendChild（theHeaderText）; 
 getTheTableTag.appendChild（createTheHeaderElements）; 
 
}; 
} 
函数onQueryFailed（sender，args）{
 alert（'Request failed。'+ args.get_message（）+'\\\
'+ args.get_stackTrace（））; 
 
  

解决方案使用 setAttribute 像这样：

  var createA = document.createElement（'a'）; 
 var createAText = document.createTextNode（theCounter）; 
 createA.setAttribute（'href'，http://google.com）; 
 createA.appendChild（createAText）; 
 getTheTableTag.appendChild（createA）; 
  

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

解决方案

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

这篇关于createElement< a href = variable1> variable2< / a>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！