Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

101
Vistas
Can I create clickable td tag with javascript?

My html code has "a" tag inside "td" tag like below code.

<td align="left"> <a href="besir.html" target="_blank">  KASSAB Besir </a> </td>

I want to add new clickable line to my table with javascript. My js code is given below.

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

A new row is added to the table but the above code is not working properly. td is created but not clickable.

about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

You are appending an empty <a> tag since you are not using innerHTML for it

createTD.innerHTML = "SURNAME Name";  // Incorrect

createTDA.innerHTML = "SURNAME Name";  // Correct

Try it here

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

about 4 years ago · Juan Pablo Isaza Denunciar

0

Your code is almost working; the mistake you made was setting the text in the innerHTML of the table cell, instead of the anchor tag -- so the link existed, it was just invisible because there was nothing inside it.

Here's a corrected version (with some extra code to demonstrate its usage, since you omitted the part that actually attaches anything to the 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>

It's maybe worth noting that you can do this more easily and readably by inserting the full html string instead of using individual DOM methods:

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>

about 4 years ago · Juan Pablo Isaza Denunciar

0

You can try:

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; 
            }
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda