Setting <td> value using jquery

Question

I have the div structure shown below. For the second <td> in the table i want to replace   with a hyperlink whose href attribute is stored in the variable myLink. How can i do this with jquery ?

Please help. Thank You.

<div class="pbHeader">
  <table cellspacing="0" cellpadding="0" border="0">
    <tbody>
         <tr>
             <td class="pbTitle">
               <h2 class="mainTitle">Transfer Membership</h2>
             </td>
             <td>
                    &nbsp;
             </td>
          </tr>
     </tbody>
   </table>
</div>

Answer 1

You can do something like this:

// you said this was already set
var myLink = 'http://stackoverflow.com/questions/2761234';

var $a = $('<a>').attr('href',myLink).text('My Link!');
$('.pbHeader td:eq(1)').empty().append($a);

This uses the :eq() selector to grab the second TD underneath a .pbHeader (:eq is zero based, so 0 is the first element, 1 is the second element). It empties your   and appends the generated <a> tag inside of it.

You could also do this:

$('.pbHeader td:eq(1)').html('<a href="'+myLink+'">My Text!</a>');

Which sets the innerHTML of that <td> to be your "link"

jsbin preview