JQuery :: Contents Are Not In Between The Prepended And Appended Code?

I try to prepend/append code to the contents of a list item, but the contents are not in between the prepended and appended code..

the html:
<ul id="hoofdNavigatieLijst"><li>Collectie</li></ul>

the js:
$('ul#hoofdNavigatieLijst > li').prepend('<a href="/" class="klapOpen">');
$('ul#hoofdNavigatieLijst > li').append('</a>');

generated html code:
<li><a href="/" class="klapOpen"></a>Collectie</li>

how can I get the "</a>" to go to the end, after "Collectie"? I even put the <li> contents in a div, and tried it like this:

$('ul#hoofdNavigatieLijst > li > div').each(function() {
var ervoor = $(this);
var startlink = "<"+"a href="/xxx" class="klapOpen">"[code]....

does the same thing..when I replace the contents of the var's with normal words, they do wrap around the div, but when I use html code, they both go before the div, resulting in the same generated code as shown in previous post, plus the <div>-tags:

<li><a href="/" class="klapOpen"></a><div>Collectie</div></li>