Replacement

These methods are used to remove content from the DOM and replace it with new content.

replaceWith

Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.

Replace single element

jQuery

target.replaceWith(element);

Vanilla JS

target.replaceWith(element);

Replace each element in the set

jQuery

targets.replaceWith(element);

Vanilla ES6+

for (var target of targets)
    target.replaceWith(element.cloneNode(true));
element.remove();

Vanilla ES5

targets.forEach(function(target) {
    target.replaceWith(element.cloneNode(true));
});
element.remove();

Element is removed before replacement. So if we want to emulate jQuery behavior(replace with the same element multiple times), we must clone it before every replacement and finally remove the original element.

replaceAll

Replace each target element with the set of matched elements.

Replace a single target

jQuery

element.replaceAll(target);

Vanilla JS

target.replaceWith(element);

Replace the set of targets

jQuery

element.replaceAll(targets);

Vanilla ES6+

for (var target of targets)
    target.replaceWith(element.cloneNode(true));
element.remove();

Vanilla ES5

targets.forEach(function(target) {
    target.replaceWith(element.cloneNode(true));
});
element.remove();

Element is removed before replacement. So if we want to emulate jQuery behavior(replace with the same element multiple times), we must clone it before every replacement and finally remove the original element.

shopify traffic stats