Swapping 2 html table elements

Question

So I made this sliding puzzle using html, css and JavaScript:

this is a table and my question is how do I swap 2 table elements? Let's say the one with the face (id = tile-2) and the white empy one (id = empty)

Answer 1

Hmm... try this: https://jsfiddle.net/h7sp1ey8/

<button onclick='swap();'>
Swap
</button>
<table>

<tr>
<td id='f1'>
Contents of td 1
</td>
</tr>
<tr>
<td id='f2'>
  Contents of t2
</td>  
</tr>
</table>
<script>
function swap()
{
var f1 =document.getElementById('f1');
var f2=document.getElementById('f2');
var initialinner = f1.innerHTML;
f1.innerHTML=f2.innerHTML;
f2.innerHTML=initialinner;
}
</script>

Post your code if you want an exact solution. Here is how you program should work:

1. get id of box to swap
2. get id of box to swap to
3. swap them using method I gave in jsfiddle