Javascript <；br/>；不处理新创建的列表项

我有一个由点击事件填充的收藏夹列表。即使功能正常，列表项也不会被换行符分隔：

Stuff.docxTemplate 1.docxTemplate 2.docxNext指南

Line.docx更多.docx

我在

.append（）

中包含了

，但它不起作用。我以前在jQuery中包含了换行符，所以我不确定为什么它现在不起作用。有什么想法吗

JS代码段：

函数faveFunc（evt）{
var anchor=$（$（evt.target）.prev（）.find（“a”）[0]）.clone（）；
开关（$（“.populate faves”）.find（“a:contains（“+$（锚定）.text（）+”））.length）
{
案例0：
$（“.populate faves”）.append（锚点）；
打破
违约：
$（“.populate faves>a:contains（“+$（锚定）.text（）+”）.remove（）；
打破
}
}; // ------------ 法维芬克
函数newList（）{
let data=$（$（evt.target）.prev（）.find（“a”）[0]）.html（）
$（“.populate faves”）.html（“”）；
$（“#km表id tbody tr”）。每个（函数（i，el）{
让fave=$（el.find（“.checkbox类”）；
让itemText=$（el）.find（数据）；
如果（$（fave）.is（“：checked”））{
//$（“.populate faves”）.append（“
”+$（itemText.html（）+”
）；
$（“.populate faves”）.append（“

”）；
}
});
console.log（newList）；
}; // ----- 新列表（）

HTML:

。。。
我的最爱：
...

--- 更新代码：

函数newList（）{
让数据=$（evt.target.prev（）.find（“a”）.eq（0.html（）；
让outputList=$（“.populate faves.ul faves”）；
$（“.populate faves”）.html（“”）；
$（“#km表id tbody tr”）。每个（函数（i，el）{
设fave=$（“.checkbox类”，el）；
设itemText=$（数据，el）；
如果（fave.prop（“：checked”））{
outputList.append（“
”+itemText.html（）+”
“+”
）；
//$（“.populate faves ul”）。追加（“

”）；
}
});
//console.log（newList）；
};

HTML:

我的最爱：

纱帽

---

您需要

或

才能使用

。

---

另外，

元素缺少结束标记。

在代码中添加了注释，并对其进行了一些清理。添加了一个

ul

，以便将元素附加到其中

函数newList（）{
让data=$（evt.target.prev（）.find（“a”）.eq（0.html（）；//使用eq（）避免跳出jQuery对象
让outputList=$（“.populate faves.list”）；//查找一次输出列表
$（“.populate faves”）.html（“”）；
$（“#km表id tbody tr”）。每个（函数（i，el）{
//您可以使用$（选择器，上下文）版本来避免创建不必要的jQuery对象
设fave=$（“.checkbox类”，el）；
设itemText=$（数据，el）；
//如果您已经拥有该元素，请使用prop（'checked'）而不是is（'：checked'）来访问该元素的布尔属性
如果（最喜欢的道具（“选中”））{
//将li追加到列表中，并正确关闭它
追加（“
”+itemText.html（）+“
”）；
}
});
};

我的最爱：

我认为您需要一个
或
来包围
元素
li
没有父元素
ol
或
ul
无效。您需要将
.populate faves
元素更改为
ul
，或将
ul
放在其中并附加到该元素，然后需要使用
关闭
。更好的方法是执行
$（'container'）.append（$（'li>'）.text（“bla”）
另外，不要对换行符使用

s，使用块元素或CSS将元素设置为
display:block
@ChrisG，如下所示<代码>$（“.ul faves”）。追加（$（“
”）。文本（$（itemText））

li

也可以是

菜单

元素的子元素。嘿@Taplar，谢谢你的回复和代码。我做了您建议的更改，但不幸的是列表项仍然没有分开。您有没有办法在问题中用一个可运行的代码片段来展示您的问题示例@博德罗维以前试过，但运气不好。我用更新后的代码和一个屏幕盖编辑了我的帖子正文。嘿@Taplar我改变了一些东西，我得到了它。似乎我没有使用正确的选择器——我注意到所选项目没有改变为我在CSS中设置的颜色。

function faveFunc(evt) {
    var anchor = $($(evt.target).prev().find("a")[0]).clone();
    switch($(".populate-faves").find("a:contains(" + $(anchor).text() + ")").length)
    {
      case 0:
        $(".populate-faves").append(anchor);
        break;
      default:
        $(".populate-faves > a:contains(" + $(anchor).text() + ")").remove();
        break;
    }


  }; // ------------ faveFunc

function newList() {
    let data = $($(evt.target).prev().find("a")[0]).html()
    $(".populate-faves").html("");
    $("#km-table-id tbody tr").each(function(i, el) {
      let fave = $(el).find(".checkbox-class");
      let itemText = $(el).find(data);
      if($(fave).is(":checked")) {
        // $(".populate-faves").append("<li>" + $(itemText).html() + "<br/>");
        $(".populate-faves").append("<li> <br />");
      }
    });
   console.log(newList);
}; // ----- newList()

...

<div id="myFave.hs-gc-header" class="faves-div">
     <p style="font-weight:bold">My Favorites:</p>

     <div class="populate-faves"></div> <!-- Where I want the list items to appear -->
</div>

...

function newList() {
    let data = $(evt.target).prev().find("a").eq(0).html();
     let outputList = $(".populate-faves .ul-faves");

     $(".populate-faves").html("");

    $("#km-table-id tbody tr").each(function(i, el) {
      let fave = $(".checkbox-class", el);
      let itemText = $(data, el);

      if(fave.prop(":checked")) {
        outputList.append("<li>" + itemText.html() + "</li>" + "<br/>");
        // $(".populate-faves ul").append("<li> <br />");
      }
    });
    // console.log(newList);
  };

<div id="myFave.hs-gc-header" class="faves-div">
            <p style="font-weight:bold">My Favorites:</p>

            <div class="populate-faves">
              <ul class="ul-faves"></ul>
            </div>
          </div>