How can I include an element within a div without using html?

I'm sorry if my questions is vague or unclear as I am relatively new to some of these languages.

Ok, I'll explain the situation: I currently have a music player written in css and javascript however i would like to put all this "music player" inside my "content" div which is inside the in my html page. I have scouted round the internet to find out that you can't actually change the parent div in css (Sorry if I'm wrong or am using the wrong terminology) but, it can be done through jquery and DOM? I was just wondering how exactly and is it the best method to do so? Anyway to help visualize the situation I'll do a very basic template of what I've done. Bear in mind the musicplayer itself does currently work and I'm not really up for moving and changing all of the css.

HTML

<head>
<script type="text/javascript">
    $(document).ready(function(){
    var description = " description blah blah "

    $('body').Musicplayer(playlist, {
          autoplay:true,
          description:description,
          Player:{
              swfPath:'../plugin/jquery-mplayer'
    }
    });
    });
    </script>
</head>
<body>
<div id="content"> 
    <!-- this is where i want the musicplayer to be --> 
    content blah blah </div>
<!-- this is where it appears at the moment when i inspect the page in mozilla firefox -->
</body>

CSS

.Musicplayer {
    z-index:100;
    etc etc other stuff 
}

Solution

I'd imagine that the music player is appended to the body because that's the selector you passed to the method/function. If you simply amend the selector to $('#content') then it should appear within the #content element, so I'd suggest:

$('#content').Musicplayer(playlist, {
      autoplay:true,
      description:description,
      Player:{
          swfPath:'../plugin/jquery-mplayer'
    }
});