如何将HTML插入数据表列下拉列表

Question

我正在使用其他建立良好的SO帖子中的一些代码在数据表中构建多选列下拉列表，但是我想向列结构添加一些其他HTML。但是，我对jQuery在此处构建HTML的特定方式并不熟悉，而且很困惑。用来构建HTML的函数为：

function cbDropdown(column) {
    return $('<ul>', { 'class': 'cb-dropdown' })
    .appendTo($('<div>', { 'class': 'LEVEL-TWO' })
    .appendTo($('<div>', { 'class': 'LEVEL-ONE' })        
    .appendTo($('<div>', { 'class': 'cb-dropdown-wrap' })
    .appendTo(column))));
}

我想做的是在类LEVEL-ONE中插入三行HTML。本质上：

<div class="cb-dropdown-wrap>
<div class="LEVEL-ONE">
      <div id="CountrySearchboxID">
         <input class="searchInput"/>
      </div>
</div>
<div class="LEVEL-TWO">
<ul class="LEVEL-TWO">
<li  << lots of lis >> </li>
</ul>
</div>
</div>

我一直在尝试

的不同变体

$('.LEVEL-ONE').prepend('<div id="CountrySearchboxID"><input class="searchInput"/></div>');

但是，当我单击控制台中的下拉容器时，我的更改虽然不会引起错误，但不会产生任何影响。 谁可以帮我这个事？ https://jsfiddle.net/7obqwupm/

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"></script>



$(document).ready(function() {

  function cbDropdown(column) {

    return $('<ul>', {
        'class': 'cb-dropdown'
      })
      .appendTo($('<div>', {
          'class': 'LEVEL-TWO'
        })
        .appendTo($('<div>', {
            'class': 'LEVEL-ONE'
          })
          .appendTo($('<div>', {
              'class': 'cb-dropdown-wrap'
            })
            .appendTo(column))));
  }


  $('#example').DataTable({
    initComplete: function() {
      this.api().columns().every(function() {
        var column = this;

        var ddmenu = cbDropdown($(column.header()))

          .on('change', ':checkbox', function() {
            var active;
            var vals = $(':checked', ddmenu).map(function(index, element) {

              active = true;
              return $.fn.dataTable.util.escapeRegex($(element).val());
            }).toArray().join('|');

            column
              .search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false)
              .draw();

            // Highlight the current item if selected.
            if (this.checked) {
              $(this).closest('li').addClass('active');
            } else {
              $(this).closest('li').removeClass('active');
            }

            var active2 = ddmenu.parent().is('.active');
            if (active && !active2) {
              ddmenu.parent().addClass('active');
            } else if (!active && active2) {
              ddmenu.parent().removeClass('active');
            }
          });

        column.data().unique().sort().each(function(d, j) {
          var // wrapped
            $label = $('<label>'),
            $text = $('<span>', {
              text: d
            }),
            $cb = $('<input>', {
              type: 'checkbox',
              value: d
            });

          $text.appendTo($label);
          $cb.appendTo($label);

          ddmenu.append($('<li>').append($label));
        });
      });

    }
  });
});



<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
  </tbody>
</table>