Question

Let’s say I have the following HTML

<table id = "mytable">
  <tr>
    <th>Hiring Manager</th>
    <td><textarea id = "textComments" cols = "15"/></td>
  </tr>
</table>

From the above markup, I’d like to append the following row

<tr>
   <td></td>
   <td>
       <span class = "CharCounter">
           <span id="lblCharCounter">Label</span>
           characters (500 max)
       </span>
   </td>
</tr>

I want to be able to select the table, from the textarea.

Thank for helping

Answer 1

If you want to add another row inside of the table, find the textarea, and slowly work your way until you get to the point you want. To go back an element, simply use .parent() again.

$('#textComments').parent().parent().after('
    <tr>
       <td></td>
       <td>
         <span class = "CharCounter">
           <span id="lblCharCounter">Label</span>
           characters (500 max)
         </span>
      </td>
   </tr>'
);