javascript - 包裹在标签中的 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');
});

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

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

如@Marc B already explained in his answer ，每 append插入一个新的 DOM 节点，而不仅仅是 HTML 文本。当您调用$element.append('<div>')时，然后浏览器(甚至 jQuery)将纠正“损坏的”HTML。