Wrapping HTML Elements with a Parent DIV using jQuery

One of our projects required us to add a target element to a parent DIV dynamically. In this example, we are targeting the “child” CSS class and adding any elements that have that CSS class to a DIV with the “parent” CSS class.


// Add a selector to a parent DIV with the wrapping class
var targetSelector = ".child";
$(targetSelector).each(function() {
// Check the parent doesn't already have the wrapperClass on it
var wrapperClass = "parent";
if ($(this).parent().hasClass(wrapperClass)) {
return;
}

// Wrap the target element with a parent div with class = wrapperClass
var parent = document.createElement(“div”);
$(parent).addClass(wrapperClass);
var $currNode = $(this).clone();

// Replace the current node with the parent and append the current node content
$(this).replaceWith($(parent));
$(parent).append($currNode);
});