createElement <a href=ariable1>变量2</a>
createElement <a href=ariable1>变量2</a>
提问于 2013-08-29 09:09:00
我需要在SharePoint 2010中创建一个导航web部件。我使用一个表来显示SharePoint列表中的项，该表的结构如下：
Column1 =要显示的文本(标题) Column2 =网址(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());
}回答 3
Stack Overflow用户
回答已采纳
发布于 2013-08-29 09:27:00
像这样使用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>
Stack Overflow用户
发布于 2017-04-22 03:59:57
多亏了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>Stack Overflow用户
发布于 2013-08-29 09:39:57
您可以使用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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18500759
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号