가상객체 질문입니다.

 overNode.append("<div class='box'></div>");

이렇게 가상객체를 만들고

그 가상객체에 또

다음과 같이 생긴 가상객체를 넣으려고합니다.

  $('<div class="sub-category"></div>')

console.log를 찍어보니
 

이렇게 나와요

마우스 오버 펑션을 넣어도 안먹고,, 가상객체 맞겟죠?

제가 하고싶은것은 

li에 마우스를 올리면 

그 아래애 box를 만들고 또 그안에 2개의 node를 넣고싶습니다..

각자 따로는 놀고있어요,,

작성한 코드는 다음과 같습니다..

li에 마우스를 올리면 

1번이 생성되고  how = overNode.append("<div class='box'></div>");
            var offset = $(overNode).offset();
     2번도 생성되고       $('<div class="sub-category"></div>')
            .appendTo(overNode)
      3번도 생성됩니다..      .html(aHtml.join(''))
            })

1,2,3번이 따로 놀아요,,

1번안에 2,3번이 들어가야하는데,,

복잡하죠? 저도 미치겠습니다..