BloggerのJavaScript内で一致する終了タグエラーを解決するにはどうすればよいですか？

Question

私はこのコードを使用して、BloggerでJavaScriptを使用したアルファベット順の並べ替えられたリストを用意しています。これはCodePenとJSFiddleで動作しますが、Bloggerで使用すると保存時にこのエラーが発生します：Error parsing XML, line 1007, column 3: The element type "li" must be terminated by the matching end-tag "".これは、この行を参照している：$this.before('<li class="splitter">' + firstLetter);。これを修正するにはどうすればいいですか？

var list = $('ul'), 
 
    items = $('li', list); 
 

 
// sort the list 
 
var sortedItems = items.get().sort(function(a, b) { 
 
    var aText = $.trim($(a).text().toUpperCase()), 
 
     bText = $.trim($(b).text().toUpperCase()); 
 
    
 
    return aText.localeCompare(bText); 
 
}); 
 

 
list.append(sortedItems); 
 

 
// create the titles 
 
var lastLetter = ''; 
 
list.find('li').each(function() { 
 
    var $this = $(this), 
 
     text = $.trim($this.text()), 
 
     firstLetter = text[0]; 
 

 
    if (firstLetter != lastLetter) { 
 
    $this.before('<li class="splitter">' + firstLetter); 
 
    lastLetter = firstLetter; 
 
    } 
 
});

.splitter { 
 
    border-top: 1px solid; 
 
    font-size: 1.25em; 
 
    list-style: none; 
 
    padding-top: 10px; 
 
    text-transform: uppercase; 
 
    padding-bottom: 10px; 
 
    margin-top: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#/"> john-doe/</a></li> 
 
    <li><a href="#/"> jane-doe/</a></li> 
 
    <li><a href="#/"> glen-doe/</a></li> 
 
    <li><a href="#/"> daniel-doe/</a></li> 
 
    <li><a href="#/"> matthew-doe/</a></li> 
 
</ul>

Answer 1

それを解釈からBloggerのXMLパーサを防ぐためにCDATAタグとJavaScriptコードラップ。

//<![CDATA[ 

var list = $('ul'), 
    items = $('li', list); 

// sort the list 
var sortedItems = items.get().sort(function(a, b) { 
    var aText = $.trim($(a).text().toUpperCase()), 
     bText = $.trim($(b).text().toUpperCase()); 

    return aText.localeCompare(bText); 
}); 

list.append(sortedItems); 

// create the titles 
var lastLetter = ''; 
list.find('li').each(function() { 
    var $this = $(this), 
     text = $.trim($this.text()), 
     firstLetter = text[0]; 

    if (firstLetter != lastLetter) { 
    $this.before('<li class="splitter">' + firstLetter); 
    lastLetter = firstLetter; 
    } 
}); 

//]]>