Html createElement <a href=variable1>variable2</a>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18500759/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
createElement <a href=variable1>variable2</a>
提问by frank billy
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:
我需要在 SharePoint 2010 中创建导航 Web 部件。我使用一个表来显示 SharePoint 列表中的项目，并且该表的结构如下：
Column1 = The text to display (Title) Column2 = The URL (TitleLink)
Column1 = 要显示的文本（Title） Column2 = 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.
我似乎无法弄清楚如何实现创建<a href></a>标签并将变量放在适当的地方。我不断得到的结果只是<th>标签中的 HTML 标记。我在谷歌上搜索了很多地方，但还没有找到一个好的答案。
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.
下面是在用变量打印我的表头方面工作正常的代码。但是，在打印文本 ( 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());
}
回答by mwilson
Use setAttributelike this:
setAttribute像这样使用：
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>回答by Joe Rowe
Thanks to mwilson
感谢米尔森
Here is another code sample
这是另一个代码示例
Change
改变
<body> to <body id="myBody">
Add to your body:
添加到您的身体：
<button onclick="outputFunction()" >click me</button>
Then add a 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>
回答by eggshot
You can make use of td instead of th as the link is bolded as default:
您可以使用 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);
