JQuery `wrap` not working with append

Question

I have a function that is suppose to return several HTML elements wrapped in span tags. The elements are returned, by they are not wrapped in the tag.

This is my code:

function summerizeEdit(edit) {
    var editHtmlBody = '<div>' + edit.content + '</div>';
    var $editElements = $(editHtmlBody).find(EDIT_SELECTORS_TO_SUMMERIZE.join(', '));
    var $editSummery = $('<div />').append($editElements.wrap('<span class="test"/>'));
    return $editSummery.html();
}

Answer 1

The jQuery .wrap method wraps the selected elements, and then returns the selected elements. Therefore, you'll need to select the wrapper if you want the wrapper to be appended rather than the selected elements.

$('<div>').append(el.wrap('<span>').parent());

 $("#target").append($("<div>").wrap("<div class='test'></div>").text("Hello World!").parent()); 

 .test { color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="target"></div>