title: Element that follows user input
body: <p>I've created an element(image div) called 'bunny', an input form and a fieldset. I also have a localhost web server which runs my websocket server for my chat. I'm trying to implement a function where for every message(which are spans) sent, the bunny element is placed beside each message. </p>
  
  <p><strong><em>The problems I've encountered doing this are:</em></strong></p>
  
  <ul>
  <li><p>Since the messages are span, the bunny element duplicates itself and is appended to each span instead of just the end of the message.</p></li>
  <li><p>The bunny element doesn't sit exactly beside the message, it is usually below the span on a new line, I've tried appendTo and InsertAfter in JS</p></li>
  </ul>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="bunny"&gt;
  &lt;/div&gt;
  
  &lt;input id="message" type="text" /&gt;
  &lt;button type="button" id="movebunny"&gt;Bunny&lt;/button&gt;
  
  &lt;fieldset id="showMsg" &gt;
  &lt;!--messages are shown here--&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>var messages;
  var form;
  var inputBox;
  
  function log_msg(msg) {
    messages.appendChild(document.createElement("span")).innerHTML = msg;
  } 
  
  function doInit() {
    inputBox = document.getElementById("message");
    messages = document.getElementById("messages");
    form = document.getElementById("message-form");
    var s;
    ...
  </code></pre>
  
  <p><em>//there's a bit more to the js code but they're all just to connect to server//</em></p>
  
  <p>Would greatly appreciate any suggestions to getting element at the end of each message sent on click of a button, thanks!</p>