jquery replaceWith not responding to click call

Question

So I have a floated div that I want to replace the contents of with jQuery. Here I put the Bing and Google logos in for example, but despite checking the documentation, can't seem to figure out what's wrong. I noticed other people were having an issue until they wrapped whatever it was to be replacing the old content with tags, but that hasn't worked. Is the problem because of nested divs, or...?

<style>
#content {
  float: right;
  width: 650px;
  overflow-x: hidden;
  color:fff;
}

#contentWrapper {
  position: relative;
}

#explainWrapper1 {
  float:left;
  width:350px;
  }
</style>

<script>
$('#amd1').click(function () {
             $('#content').replaceWith('<img src="http://www.google.com/images/srpr/logo3w.png">');
            });
            </script>

...

<a href="#" id="amd1">Amendment 1</a>
            <div id="contentWrapper">
                <div id="content">
      <img src="http://www.smartinsights.com/wp-content/uploads/2012/07/bing-logo.png">
    </div>
<div id="explainWrapper1">
</div></div>

Answer 1

You should put your code within document ready handler:

$(document).ready(function(){
   $('#amd1').click(function () {
      $('#content').replaceWith('<img src="http://www.google.com/images/srpr/logo3w.png">');
   });
})

Answer 2

Please paste your full html bruv, issue seems somewhere else:

Working demo http://jsfiddle.net/3L37W/

code

$('#amd1').click(function () {
             $('#content').replaceWith('<img src="http://www.google.com/images/srpr/logo3w.png">');
            });​