JQuery prependTo и appendTo безрезультатно

Question

Следующий код должен добавить некоторый код внутри каждого элемента .scrollable. Каждый элемент должен иметь первые строки внутри .scrollable перед уже существующим контентом и вторую после уже существующего контента.

$('.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');

Вместо этого весь контент отсутствует. Что я не так понял?

Извините, это был тест из более раннего

$('.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');
                $('</div></div>').appendTo('.scrollable');

Вот как это выглядит сейчас

Answer 1

Вы не можете prepend() начинать теги и append() заканчивать теги. Эти методы работают только с «полными» элементами.

Вы должны использовать wrapInner () вместо:

$('.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>');

Answer 2

Поскольку вы должны заменить 'задницу' на <span>arse</span>.

обновление:

ну, это не правильно:

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

вы должны включить эти закрывающие div в первый запрос prependto, затем, если вы хотите включить что-то в эти вновь созданные div, просто вызовите их с помощью jquery и вставьте в них то, что вам нужно