Load div in a page without refresh whole of page

Question

Hello I was make a experiment with DnD html5 and I need to make function who can bring back my div into formerly without refreshing a page.

This is my html,

<div class='panel panel-default' >
 <div class="canvas-wrap">
  <div id="canvastowr">
   <img src="<?php echo base_url()?>assets/images/tower_bg/sst3/tower2.png" draggable="false" width="450" height="460">
  </div>
  <div class="overcanvas" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div class="mw-rf">
   //this img move into dive class overcanvas and I need to make them back
   <img id="mwdragable" src="<?php echo base_url()?>assets/images/mw.png" class="overmw" ondragstart="drag(event)" draggable="true" width="40" height="40" >
   <img id="rfdragable" src="<?php echo base_url()?>assets/images/rf.png" class="overrf" ondragstart="drag(event)" draggable="true" width="40" height="40" >
  </div>
 </div>
</div>

I was try load jquery, from this question. But didn't work for me. this is my button to refresh the div back into former, but not work.

document.getElementById('clear').addEventListener('click', function() {
 $('#canvas-wrap').load(document.URL +  ' #canvas-wrap');
}, false);

document.URL not work for me. then I must use what? please help me.

EDIT:

this is the screen shot: before I dropping the image, that is a fullscreen modal I need to drop the image to div rectangle whose overlaying the image tower.

After I dropped the image :

I need to make that clear button. bring back the draggable image comeback into first position.

Answer 1

Try this:

document.getElementById('clear').addEventListener('click', function() {
 $('#canvas-wrap').load(window.location.href +  ' #canvas-wrap');
}, false); 

Use window.location.href for current URL

But this will only replace it with what's already there so what's the point?