javascript - crear - createElement<a href=variable1> variable2</a>
document.createelement( input) (3)
Tengo un requisito para crear un elemento web de navegación dentro de SharePoint 2010. Estoy usando una tabla para mostrar los elementos de una lista de SharePoint y la tabla está estructurada de la siguiente manera:
Column1 = El texto a mostrar (Título) Column2 = El URL (TitleLink)
Parece que no puedo encontrar la forma de crear la etiqueta <a href></a> y poner las variables dentro de los lugares apropiados. El resultado que constantemente termino obteniendo es solo el marcado HTML en las etiquetas <th> . He buscado en bastantes lugares en google y todavía no he encontrado una buena respuesta.
A continuación se muestra el código que está funcionando muy bien en lo que respecta a la impresión de los encabezados de mi tabla con las variables. Sin embargo, detrás de ese texto impreso ( theHeaderText ) quiero poner un enlace detrás de él para que cuando el usuario haga clic, vaya a ese enlace.
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());
}
Puede utilizar td en lugar de th ya que el enlace está en negrita por defecto:
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);
Use setAttribute así:
var createA = document.createElement(''a'');
var createAText = document.createTextNode(theCounter);
createA.setAttribute(''href'', "http://google.com");
createA.appendChild(createAText);
getTheTableTag.appendChild(createA);
Gracias a mwilson
Aquí hay otra muestra de código
Cambio
<body> to <body id="myBody">
Agrega a tu cuerpo:
<button onclick="outputFunction()" >click me</button>
A continuación, agregue un script fuera del cuerpo
<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>