如何使用jQuery为已生成的<li>元素添加<ul>包裹标签？

现有HTML结构：

<div class="note">
  <div class="fielditem">
   test one<br>
   test two
  </div>
</div>

已实现用jQuery将每行内容用<li>包裹的代码：

jQuery(document).ready(function($) {
  var listHTML = $('.note .fielditem').html();
  if (listHTML !== undefined && listHTML !== null) {
  var listItems = listHTML.split('<br>');
  $('.note .fielditem').html('');
  $.each(listItems, function(i, v) {
    var item = '<li>' + v + '</li>';
    $('.note .fielditem').append(item);
  });
 }
});

现在需要将所有<li>用<ul>包裹，最终目标结构：

<div class="note">
  <div class="fielditem">
   <ul>
    <li>test one</li>
    <li>test two</li>
    </ul>
  </div>
</div>

提供两种简单实现方式：

方式一：先创建<ul>再追加<li> #

修改原代码逻辑，先在.fielditem中插入空的<ul>，再将所有<li>追加到这个<ul>内部，直接完成包裹：

jQuery(document).ready(function($) {
  var listHTML = $('.note .fielditem').html();
  if (listHTML !== undefined && listHTML !== null) {
    var listItems = listHTML.split('<br>');
    // 清空容器并插入空ul
    var $targetUl = $('<ul></ul>').appendTo('.note .fielditem');
    $.each(listItems, function(i, v) {
      // 过滤空内容项，避免生成空li
      if ($.trim(v) !== '') {
        $targetUl.append('<li>' + v + '</li>');
      }
    });
  }
});

方式二：用wrapAll()包裹已生成的<li> #

如果保留原有生成<li>的逻辑，可在生成完成后，用jQuery的wrapAll()方法将所有<li>统一包裹进<ul>：

jQuery(document).ready(function($) {
  var listHTML = $('.note .fielditem').html();
  if (listHTML !== undefined && listHTML !== null) {
    var listItems = listHTML.split('<br>');
    $('.note .fielditem').html('');
    $.each(listItems, function(i, v) {
      if ($.trim(v) !== '') {
        $('.note .fielditem').append('<li>' + v + '</li>');
      }
    });
    // 把所有li包裹进ul
    $('.note .fielditem li').wrapAll('<ul></ul>');
  }
});

注：加入$.trim(v) !== ''的判断是为了避免拆分<br>后产生空内容的<li>，让最终结构更整洁。

内容的提问来源于stack exchange，提问作者user1292176