jQuery: Rewriting three <div> elements

Three hard-coded DIV elements overwritten on load as span elements

The jQuery Code START

    
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script type="text/javascript">
  
  $(document).ready(function() {
    $("div").html("<span class='blue'>" + "Here is a new <span> element.</span>");
  });
  
  </script>
  
  <style type="text/css">
      .blue { color:blue; }
  </style>
  <style type="text/css">
      .code { color: red; }
      .back { background-color: yellow; }
    </style>
</head>

<body>
  <h1>jQuery: Rewriting three <div> elements</h1>
  <div></div>
  <div></div>
  <div></div>