如何将UL元素插入列表

Question

到目前为止，这是我的jQuery脚本：

$(document).ready(function() {
var table = $('#reagent').DataTable();
var alphabet = $('<nav aria-label="Page navigation" id="alphanav">');
$('<li class="clear active" /><a href="#">')
.data('letter', '')
.html('None')
.appendTo(alphabet);
for (var i = 0; i < 26; i++) {
var letter = String.fromCharCode(65 + i);
$('<li/>')
.data('letter', letter)
.html('<a href="#/">' + letter + '</a>')
.appendTo(alphabet);
}
alphabet.insertBefore(table.table().container());
alphabet.on('click', 'li', function() {
alphabet.find('.active').removeClass('active');
$(this).addClass('active');
_alphabetSearch = $(this).data('letter');
table.draw();
});
});

从那里我有一个这样的列表：

<nav aria-label="Page navigation" id="alphanav">
<li class="clear active">None</li>    
<a href="#">None</a>
<li>
<a href="#/">A</a>
</li>
</nav>

如何在<nav aria-label="Page navigation" id="alphanav">之后添加<ul>，在</nav>之前添加</ul>？

我试着使用append，但它只是在第一个Nav 之后添加了<ul></ul>

Answer 1

要解决这个问题，您可以使用与现有相同的方法在jQuery中创建元素。只需在jQuery对象中创建ul，将其附加到<nav>，然后将您的li附加到您创建的ul。像下面这样的东西。请注意，我删除了数据表代码，因为它与问题无关。

$(document).ready(function() {
var $table = $('#reagent');
var $alphabet = $('<nav aria-label="Page navigation" id="alphanav">');

let $ul = $('<ul />').appendTo($alphabet);
let $li = $('<li class="clear active" />').data('letter', '').appendTo($ul);
$li.text('None');
for (var i = 0; i < 26; i++) {
var letter = String.fromCharCode(65 + i);
$('<li/>')
.data('letter', letter)
.html('<a href="#/">' + letter + '</a>')
.appendTo($ul);
}
$alphabet.insertBefore($table);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="reagent"></table>

Answer 2

也许你可以做一些类似的事情

let listItem = document.getElementById('alphanav').innerHTML;
let result = `<ul>${listItem}</ul>`;
listItem.innerHTML = result