Question

I’m trying to wrap a jQuery object in a list. The object is

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

and the interaction

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

but this inevitably ends up in a blank list item. But if I do something like

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

the item doesn’t have the link. What should I do?

Answer 1

Here is another way:

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

or if you want to leave the element at it’s original place, you can clone it:

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

As @Marc B already explained in his answer, every append inserts a new DOM node, not just HTML text. When you call $element.append('<div>'), then the browser (or even jQuery) will correct the “broken” HTML.