title: How can I border each word in jquery in this situation?
body: <p>Click <a href="http://jsfiddle.net/18zdmp4b/1/" rel="nofollow">http://jsfiddle.net/18zdmp4b/1/</a> to see result. Enter value in the input, press Enter key, the value will be border. However, I want to border each word alone. If I enter banana, apple and banana should be separate in two different rectangle. How can I achieve that? appreciate.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$( "#input" ).keydown(function( event ) {
  
     //press Enter key
  if ( event.which == 13 ) {
     event.preventDefault();
      
      //put input value into div
  var value=$('#input').val();
      $('#test').append(" "+value);
     
     $('#test').css('border-style','solid');
       
  }
      
      
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.test {display:inline-block;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="test" id="test"&gt;apple&lt;/div&gt;
  &lt;input type="text" id="input"/&gt;</code></pre>
  </div>
  </div>
  </p>