包裹在标签中的 jquery DOM 对象最终会自行结束？

Question

我正在尝试将 jQuery 对象包装在列表中。对象是

<a class="medium button" title="Title"">Sample</a> 

和交互

$(".medium").click(function() {
  $(".list4").append("<li>");
  $(".list4").append($(this));
  $(".list4").append("</li>");
});

，但这不可避免地会出现在空白列表项中。但如果我做类似的事情，

$(".medium").click(function() {
  $(".list4").append("<li>");
  $(".list4").append($(this).html());
  $(".list4").append("</li>");
});

该项目就没有链接。我应该怎么办？

Answer 1

这是另一种方法：

$(".medium").click(function() {
  $("<li />").append(this).appendTo('.list4');
});

或者如果您想将元素保留在原来的位置，您可以克隆它：

$("<li />").append($(this).clone()).appendTo('.list4');

如@Marc B 已经在他的回答中解释了，每个append 插入一个新的 DOM 节点，而不仅仅是 HTML 文本。当您调用 $element.append('

') 时，浏览器（甚至 jQuery）将更正“损坏的”HTML。

Answer 2

尝试

$('.list4').append('<li>' + $(this).html() + '</li>');

每个追加操作生成至少一个新节点。像这样调用 3 次会生成 3 个新节点。因此...嵌入要附加的完整 HTML 代码段，这将生成一个新的

Answer 3

$(".medium").click(function() {
  $(".list4").append("<li></li>");
  $(".list4 li").append($(this));
});

你尝试过吗？