title: jQuery when if/else are done
body: <p>If got a problem using jQuery and I don't know how to fix it.
  Simply said Ive got the following:</p>
  
  <pre><code>var overlay;
  
  if(condition == "test") {
      overlay = $("&lt;div&gt;&lt;/div&gt;");
  }
  else if (condition == "test2") {
      console.log("first-log");
      overlay = $("&lt;span&gt;&lt;/span&gt;");
  }
  
  console.log("second-log");
  overlay.prependTo("body");
  </code></pre>
  
  <p>If the condition matches the 'if', everything works fine, the overlay is filled with content and will prepend to the body.</p>
  
  <p>While the condition matches the 'else if', I get a error that overlay is undefined.</p>
  
  <p>So I've putted some console.log()'s to see what my code is doing.
  Both console.log action are fired, but in my browser console I'm first seeing the 'second-log' and after that the 'first-log'.</p>
  
  <p>My code is trying prepend before the 'if / else if' is finished, even if the condition matches.</p>
  
  <p>I tried looking for a answer but I couldn't find anything at all so I hope someone here can help me out. Thanks!</p>
  
  <p><a href="http://jsfiddle.net/EBcG9/" rel="nofollow">jsfiddle of my code</a></p>