Insertion around

These methods allow us to insert new content surrounding existing content.

wrap

Wrap an HTML structure around each element.

jQuery

element.wrap('<div>');

Vanilla JS

Quick & dirty way. Destroys all event hooks, etc. Use with caution:

element.outerHTML = '<div>' + element.outerHTML + '</div>';

Safe approach:

var wrapper = document.createElement('div');
element.before(wrapper);
wrapper.append(element);

wrapAll

Wrap an HTML structure around all elements in the set.

jQuery

elements.wrapAll('<div>');

Vanilla ES6+

var wrapper = document.createElement('div');
elements[0].before(wrapper);
elements.forEach(x => wrapper.append(x));

Vanilla ES5

var wrapper = document.createElement('div');
elements[0].before(wrapper);
elements.forEach(function(element) {
    wrapper.append(element);
});

wrapInner

Wrap an HTML structure around the content of each element.

jQuery

element.wrapInner('<div>');

Vanilla JS

Quick & dirty way. Destroys all event hooks, etc. Use with caution:

element.innerHTML = '<div>' + element.innerHTML + '</div>';

Safe approach:

var wrapper = document.createElement('div');
while (element.firstChild)
    wrapper.append(element.firstChild);
element.append(wrapper);

unwrap

Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

jQuery

element.unwrap();

Vanilla JS

Quick & dirty way. Destroys all event hooks, etc. Use with caution:

element.parentElement.outerHTML = element.parentElement.innerHTML;

Safe approach:

var wrapper = element.parentElement;
while (wrapper.firstChild)
    wrapper.before(wrapper.firstChild);
wrapper.remove();
shopify traffic stats