Jquery: duplicate and paste html

Question

hmm ok heres abbreviated code

 <div id="SideCategoryList">
        <div class="BlockContent">
           <ul>
              <li><a href="#">Link A</a></li>
              <li><a href="#">Link B</a></li>
          </ul>
       </div>
     </div>
    <div id="navcont">
    <ul class="menu" id="menu">
      <li id="hov"><a href="#">Top Link</a></li>
      <li><a href="#">Bottom Link</a></li>
    </ul>
   </div>

I want to use jquery to duplicate Whats in the first ul to the first li in #menu so that it looks like this:

<div id="SideCategoryList">
        <div class="BlockContent">
           <ul>
              <li><a href="#">Link A</a></li>
              <li><a href="#">Link B</a></li>
          </ul>
       </div>
     </div>
    <div id="navcont">
      <ul class="menu" id="menu">
         <li id="hov"><a href="#">Top Link</a>
            <ul>
               <li><a href="#">Link A</a></li>
               <li><a href="#">Link B</a></li>
            </ul>
        </li>
        <li><a href="#">Bottom Link</a></li>
      </ul>
   </div>

so the finished product will be a 2-level list ... let me know if this is makin sense lol

Answer 1

$("#hov").append($(".BlockContent ul").clone());

Answer 2

var content = $('#BlockContent').html();

$('#hov').append(content);

will add contentat the end of everything innerhtml $('#hov').

those. after <a href="#">Top Link</a>.

hope that helps :)

Answer 3

maybe something like this ...

var copied_html = $('#BlockContent').html();
copied_html.insertAfter($('#menu li#hov a'));