How to add button dynamically in table cell

I think you want to add a button dynamically in table cell using javascript. Don't worry, it's as easy as cutting a cake.

I assume that you have the following table.

<table border> 
 <tr>
   <td>cell 1-1</td> 
   <td class="btn-cell">cell 1-2</td>
 </tr>
 <tr>
   <td>cell 2-1</td> 
   <td>cell 2-2</td>
 </tr>
</table>

If you look carefully at the table above, you will see that we have added a class name to a table cell. We'll add a button to that cell.

<script> 
 function myFunc(){
 
  let newBtn = document.createElement('button');
      newBtn.innerText = 'Click New Btn';
   document.querySelector('.btn-cell').appendChild(newBtn);

 }
</script>

<table border> <tr> <td>cell 1-1</td> <td class="btn-cell">cell 1-2</td> </tr> <tr> <td>cell 2-1</td> <td>cell 2-2</td> </tr> </table> <button onclick="myFunc()">Insert Button</button> <script> function myFunc(){ let newBtn = document.createElement('button'); newBtn.innerText = 'Click New Btn'; document.querySelector('.btn-cell').appendChild(newBtn); } </script> Try it Yourself »

1. First we have created a button using the createElement() method and stored in a variable.
2. Then, set some text to the button using the innerText property.
3. Now it's time to append the created button inside the table cell.