How do I insert UL element to list

This is my jQuery script so far:

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

From that I have a list like this:

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

How do I add a <ul> right after <nav aria-label="Page navigation" id="alphanav"> and add </ul> right before </nav>?

I tried to use append but it just added <ul></ul> right after the first Nav

Answer

To fix this you can use the same methods of creating elements in jQuery as you already are. Simply create the ul in a jQuery object, append that to <nav> and then append your li to the ul you created. Something like the below. Note that I remove the datatable code as it wasn’t relevant to the issue.

$(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>

Advertisement

Answer