JQuery prependTo and appendTo unresulting

The following code is supposed to add some code inside each element .scrollable. Each element should have the first lines inside .scrollable before the already existing content and the second after the already existing content.

$('.scrollable').addClass('tny');
$('<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div><div class="viewport"><div class="overview">').prependTo('.scrollable');
$('arse').appendTo('.scrollable');

Instead all the content is missing. What did I get wrong?

Sorry that was a test from earlier

$('.scrollable').addClass('tny');
                $('<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div><div class="viewport"><div class="overview">').prependTo('.scrollab开发者_JS百科le');
                $('</div></div>').appendTo('.scrollable');

That is how it currently looks

You cannot prepend() start tags and append() end tags. These methods only work with "complete" elements.

You should use wrapInner() instead:

$('.scrollable').addClass('tny')
                .wrapInner('<div class="viewport"><div class="overview"></div></div>')
                .prepend('<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>');

Because you have to replace 'arse' with <span>arse</span>.

update:

well, that's not correct:

$('</div></div>').appendTo('.scrollable');

you have to include those closing divs in the first prependto query, then if you want to include something in those newly created divs, just call them with jquery and insert the stuff you want inside them