jquery - Replace Div with another Div

Question

I have this thing I m trying to do. I have a main picture of a map and within that map there are regions. These regions have hot spots on them so you can click them and it will replace the whole map with only the region. (just a simple div swap).

I need it as a div because in this div i have the hot spots listed.

There are a total of 4 divs that I am going to need to do this with.

If anyone could help me that would be awesome!

So links that are listed in a table need to replace the image in a separate div.

<tr class="thumb"></tr>
<td>All Regions (shows main map) (link)</td>
</tr>

<tr class="thumb"></tr>
<td>Northern Region (link)</td>
</tr>

<tr class="thumb"></tr>
<td>Southern Region (link)</td>
</tr>

<tr class="thumb"></tr>
<td>Eastern Region (link)</td>
</tr>
</table>


<div>All Regions image</div>
<div>northern image</div>
<div>southern image</div>
<div>Eastern image</div>

I am not allowed to post images because I don't have enough points so I know the image links wont work.

Answer 1

You can use .replaceWith()

$(function() {

  $(".region").click(function(e) {
    e.preventDefault();
    var content = $(this).html();
    $('#map').replaceWith('<div class="region">' + content + '</div>');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="map">
  <div class="region"><a href="link1">region1</a></div>
  <div class="region"><a href="link2">region2</a></div>
  <div class="region"><a href="link3">region3</a></div>
</div>