JOM-объект 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 уже объяснил в своем ответе , каждый append вставляет новый узел DOM, а не только текст HTML.Когда вы вызываете $element.append('<div>'), браузер (или даже jQuery) исправит «сломанный» HTML.

Answer 2

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

Вы пробовали это?

Answer 3

try

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

каждая операция добавления генерирует хотя бы один новый узел.При трехкратном его вызове создаются 3 новых узла.Итак ... вставьте полный фрагмент HTML для добавления, который сгенерирует только один новый <li>