Insertion inside

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

append

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

Append element to single target

jQuery

target.append(element);

Vanilla JS

target.append(element);

Append element to the set of targets

jQuery

targets.append(element);

Vanilla ES6+

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

Vanilla ES5

targets.forEach(function(target) {
    target.append(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.

appendTo

Insert every element in the set of matched elements to the end of the target.

Append single element to target

jQuery

element.appendTo(target);

Vanilla JS

target.append(element);

Append the set of elements to target

jQuery

elements.appendTo(target);

Vanilla ES6+

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

Vanilla ES5

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

prepend

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

Prepend element to single target

jQuery

target.prepend(element);

Vanilla JS

target.prepend(element);

Prepend element to the set of targets

jQuery

targets.prepend(element);

Vanilla ES6+

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

Vanilla ES5

targets.forEach(function(target) {
    target.prepend(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.

prependTo

Insert every element in the set of matched elements to the beginning of the target.

Prepend single element to target

jQuery

element.prependTo(target);

Vanilla JS

target.prepend(element);

Prepend the set of elements to target

jQuery

elements.prependTo(target);

Vanilla ES6+

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

Vanilla ES5

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

html

Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.

Get element HTML

jQuery

var html = element.html();

Vanilla JS

var html = element.innerHTML;

Set element HTML

jQuery

element.html('<p>foo</p>');

Vanilla JS

element.innerHTML = '<p>foo</p>';

Set HTML to the set of elements

jQuery

elements.html('<p>foo</p>');

Vanilla ES6+

elements.forEach(x => x.innerHTML = '<p>foo</p>');

Vanilla ES5

elements.forEach(function(element) {
    element.innerHTML = '<p>foo</p>';
});

text

Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.

Get element text

jQuery

var text = element.text();

Vanilla JS

var text = element.textContent;

Get text from the set of elements

jQuery

var text = elements.text();

Vanilla ES6+

var text = elements.map(x => x.textContent).join('');

Vanilla ES5

var text = elements.map(function(element) {
    return element.textContent;
}).join('');

Set element text

jQuery

element.text('foo');

Vanilla JS

element.textContent = 'foo';

Set text to the set of elements

jQuery

elements.text('foo');

Vanilla ES6+

elements.forEach(x => x.textContent = 'foo');

Vanilla ES5

elements.forEach(function(element) {
    element.textContent = 'foo';
});
shopify traffic stats