title: How to move element from one place to another? Does jQuery affect the HTML page structure
body: <p>If i have a list like this</p>
  
  <pre><code>&lt;body&gt;
  
      &lt;div id="carousel_container"&gt;
  
              &lt;ul id="carousel_ul" style="left: -130px;" &gt;
  
                  &lt;li&gt;&lt;a href="#"&gt;Test 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Test 2&lt;/a&gt;
                      &lt;div class="subnav"&gt;
                         ...
                      &lt;/div&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Test 3&lt;/a&gt;&lt;/li&gt;
                  ..
                  &lt;li&gt;&lt;a href="#"&gt;Test 3&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
  
      &lt;/div&gt; &lt;!--end of div id="carousel_container"  --&gt;
  
      &lt;ul class="subnav"&gt;
          &lt;li&gt;..&lt;/li&gt;
          ...
  
      &lt;/ul&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>and in my jQuery script i am using script like this</p>
  
  <pre><code>$(document).ready(function(){
  
      var ul = $("#carousel_ul");
  
      ul.find("a").each(function(){
  
          var text = $(this).text();
          var check = $(this).closest(".subnav");
          var check1 = $(this).closest("li").children(".subnav");
          var length = check1.length;
  
          if (!length) {
  
              var a = $(this);
  
              a.append("&lt;span&gt;" + a.text() + "&lt;/span&gt;");
  
          } else {  //end of if()
  
              var $li = $(this).parent();
  
              var $a  = $(this).closest("a").text();
  
              $li.addClass("subMenu");
  
              check.appendTo($("#carousel_container"));
  
          }
  
      });
  
  }); //end of $(document).ready(fn)
  </code></pre>
  
  <p>When the text is Test2. Then it comes to else check. In else i am using <code>check.appendTo($("#carousel_container"));</code>. After this line the page structure should be like this</p>
  
  <pre><code>&lt;div id="carousel_container"&gt;
  
              &lt;ul id="carousel_ul" style="left: -130px;" &gt;
  
                  &lt;li&gt;&lt;a href="#"&gt;Test 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Test 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Test 3&lt;/a&gt;&lt;/li&gt;
                  ...
                 &lt;li&gt;&lt;a href="#"&gt;Test 12&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
  
  &lt;/div&gt; &lt;!--end of div id="carousel_container"  --&gt;
  
  &lt;div class="subnav"&gt;
  
  &lt;/div&gt;
  
  &lt;ul class="subnav"&gt;
          &lt;li class="first"&gt;&lt;a href="#" title="The first demo"&gt;The first demo&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" title="Another demo"&gt;Another demo&lt;/a&gt;&lt;/li&gt;
          &lt;li class="last"&gt;&lt;a href="#" title="The third demo"&gt;The third demo&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and this time it should get text Test3. But instead of showing Test3, It shows <strong>JS Article 1</strong>. Why? Am i doing something wrong. I want that if it comes to else check, then the <strong>div.subnav</strong> remove from current li and placed after the <strong>div id="carousel_container"</strong>. I want to ask if it happens, then this will reflect in the original document, i mean to say if i saw the HTML of the page, then will it show me the modified HTML page or we are doing everything pragmatically. The changes will not reflect in the HTML page.
  Thanks</p>