Mi código html tiene una etiqueta "a" dentro de la etiqueta "td" como el siguiente código.
<td align="left"> <a href="besir.html" target="_blank"> KASSAB Besir </a> </td>Quiero agregar una nueva línea en la que se puede hacer clic a mi tabla con javascript. Mi código js se proporciona a continuación.
const createTD = document.createElement('td'); const createTDA = document.createElement('a'); createTD.align = "left"; createTD.innerHTML = "SURNAME Name"; createTDA.setAttribute('href', 'https://www.exampleurl.com'); createTD.appendChild(createTDA);Se agrega una nueva fila a la tabla, pero el código anterior no funciona correctamente. td se crea pero no se puede hacer clic.
Está agregando una etiqueta <a> vacía ya que no está usando innerHTML para ello
createTD.innerHTML = "SURNAME Name"; // Incorrect createTDA.innerHTML = "SURNAME Name"; // Correct const createTD = document.createElement('td'); const createTDA = document.createElement('a'); createTD.align = "left"; createTDA.innerHTML = "SURNAME Name"; createTDA.setAttribute('href', 'https://www.exampleurl.com'); createTD.appendChild(createTDA); document.body.append(createTD);Su código casi funciona; el error que cometió fue establecer el texto en el HTML interno de la celda de la tabla, en lugar de la etiqueta de anclaje, por lo que el enlace existía, simplemente era invisible porque no había nada dentro.
Aquí hay una versión corregida (con código adicional para demostrar su uso, ya que omitió la parte que realmente adjunta algo al DOM)
function AddTD() { const createTD = document.createElement('td'); const createTDA = document.createElement('a'); createTD.align = "left"; createTDA.innerHTML = "SURNAME Name"; // <-- changed this createTDA.setAttribute('href', 'https://www.example.com'); createTD.appendChild(createTDA); // added code to append the new cell to the table: document.getElementsByTagName('tr')[0].appendChild(createTD) } <table> <tr></tr> </table> <button onclick="AddTD()">Add</button>Tal vez valga la pena señalar que puede hacer esto de manera más fácil y legible insertando la cadena html completa en lugar de usar métodos DOM individuales:
function AddTD() { const createTD = `<td align="left"><a href="//example.com">SURNAME name</a></td>`; document.getElementsByTagName('tr')[0].innerHTML += createTD } <table> <tr></tr> </table> <button onclick="AddTD()">Add</button>Puedes probar:
function createAnchorTag() { // Create anchor element. let a = document.createElement('a'); // Create the text node for anchor element. let link = document.createTextNode("This is link"); // Append the text node to anchor element. a.appendChild(link); // Set the title. a.title = "This is Link"; // Set the href property. a.href = "https://example.org"; // Return newly anchor tag return a; }