Home/ Questions/Q 8047659
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T06:10:25+00:00

Hi I am trying to use jquery to replace a div with a new

  • 0

Hi I am trying to use jquery to replace a div with a new div when i click a button. Currently when I click the button the new div isn’t showing it is just blank when I click the button. How can I see the hidden?

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="change">Change</button>
  <div id="table1">
<table >
 <tr>
 <td>
 this is table1
 </td>
</tr>
 </table>
</div>


 <div id="table2" style="display: none">
 <table >
  <tr>
  <td>
   this is table2
   </td>
    </tr>
</table>
 <div>


 <script>
  $("#change").click(function () {
   $("#table1").replaceWith( $("#table2") );
 });
  </script>

  </body>
 </html>

an example is here: http://jsfiddle.net/S8HxM/1/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s empty because of the style you applied to table2:

     style="display: none"

    The table1 gets replaced by a hidden table 😉 so you’d have to add this:

    $("#table1").replaceWith( $("#table2").show() );

    Working: http://jsfiddle.net/qbRcK/2/

    • 0