Insertion outside

These methods allow us to insert new content outside an existing element.

before

Insert content, specified by the parameter, before each element in the set of matched elements.

Insert element before single target

jQuery

target.before(element);

Vanilla JS

target.before(element);

Insert element before the set of targets

jQuery

targets.before(element);

Vanilla ES6+

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

Vanilla ES5

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

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

insertBefore

Insert every element in the set of matched elements before the target.

Insert single element before target

jQuery

element.insertBefore(target);

Vanilla JS

target.before(element);

Insert the set of elements before target

jQuery

elements.insertBefore(target);

Vanilla ES6+

elements.forEach(x => target.before(x));

Vanilla ES5

elements.forEach(function(element) {
    target.before(element);
});

after

Insert content, specified by the parameter, after each element in the set of matched elements.

Insert element after single target

jQuery

target.after(element);

Vanilla JS

target.after(element);

Insert element after the set of targets

jQuery

targets.after(element);

Vanilla ES6+

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

Vanilla ES5

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

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

insertAfter

Insert every element in the set of matched elements after the target.

Insert single element after target

jQuery

element.insertAfter(target);

Vanilla JS

target.after(element);

Insert the set of elements after the target

jQuery

elements.insertAfter(target);

Vanilla ES6+

elements.forEach(x => target.after(x));

Vanilla ES5

elements.forEach(function(element) {
    target.after(element);
});
shopify traffic stats