title: jQuery selecting and appending DOM
body: <p>When I try to append html using jQuery 1.11.1 in the following way;</p>
  
  <pre><code>var containerObject = $("#idToSomeElement")
  
  var _uniqueIdDiv = containerObject.append("&lt;div id='container'&gt;&lt;/div&gt;");
  
  var _playPauseDiv = _uniqueIdDiv.append("&lt;div id='play_pause_div' class='play_pause_div'&gt;&lt;/div&gt;");
  var _playButtonDiv = _playPauseDiv.append("&lt;div id='play_div' class='play_div'&gt;&lt;/div&gt;");
  var _pauseButtonDiv = _playPauseDiv.append("&lt;div id='pause_div' class='pause_div'&gt;&lt;/div&gt;");
  </code></pre>
  
  <p>"container" div is appended inside "idToSomeElement" as expected, but the following appends which are expected to be inside "container" and "play_pause_div" also appears inside "idToSomeElement" div.</p>
  
  <p>Is such a cascaded usage using jQuery is not supported/buggy or am I doing something wrong?</p>
  
  <p>Obviously I was wrong, and my question became "How to chain appends without re-using selectors?" as @SergTomcat guessed correctly.</p>
  
  <p>Then, to be able to make a tree out of these cascaded functions, it becomes sth like this;</p>
  
  <pre><code>var _uniqueIdDiv = containerObject.append("&lt;div id='container' class='container'&gt;&lt;/div&gt;").children("#container");
  
  var _playPauseDiv = _uniqueIdDiv.append("&lt;div id='play_pause_div' class='play_pause_div'&gt;&lt;/div&gt;").children("#play_pause_div");
  var _playButtonDiv = _playPauseDiv.append("&lt;div id='play_div' class='play_div'&gt;&lt;/div&gt;");
  var _pauseButtonDiv = _playPauseDiv.append("&lt;div id='pause_div' class='pause_div'&gt;&lt;/div&gt;");
  
  var _volumeDiv = _uniqueIdDiv.append("&lt;div id='volume_div' class='volume_div'&gt;&lt;/div&gt;").children("#volume_div");
  var _muteDiv = _volumeDiv.append("&lt;div id='mute_div' class='mute_div'&gt;&lt;/div&gt;");
  var _unmuteDiv = _volumeDiv.append("&lt;div id='unmute_div' class='unmute_div'&gt;&lt;/div&gt;");
  
  
  var _progressBarDiv = _uniqueIdDiv.append("&lt;div id='progress_bar' class='progress_bar'&gt;&lt;/div&gt;").children("#progress_bar");
  var _progressBackgroundDiv = _progressBarDiv.append("&lt;div id='progress_bar_background' class='progress_bar_background'&gt;&lt;/div&gt;");
  var _progressAmountDiv = _progressBarDiv.append("&lt;div id='progress_amount' class='progress_amount'&gt;&lt;/div&gt;");
  var _progressPointerDiv = _progressBarDiv.append("&lt;div id='progress_pointer class='progress_pointer'&gt;&lt;/div&gt;");
  </code></pre>