The ParentNode.prepend()
method inserts a set of Node
objects or DOMString
objects before the first child of the ParentNode
. DOMString
objects are inserted as equivalent Text
nodes.
Syntax
ParentNode.prepend(...nodesOrDOMStrings);
Parameters
Return value
undefined
.
Exceptions
HierarchyRequestError
: Node cannot be inserted at the specified point in the hierarchy.
Examples
Prepending an element
var parent = document.createElement("div");
var p = document.createElement("p");
var span = document.createElement("span");
parent.append(p);
parent.prepend(span);
console.log(parent.childNodes); // NodeList [ <span>, <p> ]
Prepending text
var parent = document.createElement("div");
parent.append("Some text");
parent.prepend("Headline: ");
console.log(parent.textContent); // "Headline: Some text"
Appending an element and text
var parent = document.createElement("div");
var p = document.createElement("p");
parent.prepend("Some text", p);
console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
ParentNode.prepend() is unscopable
The prepend()
method is not scoped into the with
statement. See Symbol.unscopables
for more information.
var parent = document.createElement("div");
with(parent) {
prepend("foo");
}
// ReferenceError: prepend is not defined
Polyfill
You can polyfill the prepend()
method if it's not available:
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
(function (arr) {
arr.forEach(function (item) {
if (item.hasOwnProperty('prepend')) {
return;
}
Object.defineProperty(item, 'prepend', {
configurable: true,
enumerable: true,
writable: true,
value: function prepend() {
var argArr = Array.prototype.slice.call(arguments),
docFrag = document.createDocumentFragment();
argArr.forEach(function (argItem) {
var isNode = argItem instanceof Node;
docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
});
this.insertBefore(docFrag, this.firstChild);
}
});
});
})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
Specification
Specification | Status | Comment |
---|---|---|
DOMThe definition of 'ParentNode.prepend()' in that specification. | Living Standard | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
Full support 54 |
Edge
Full support 17 |
Firefox
Full support 49 |
IE
No support No |
Opera
Full support 39 |
Safari
Full support 10 |
WebView Android
Full support 54 |
Chrome Android
Full support 54 |
Firefox Android
Full support 49 |
Opera Android
Full support 41 |
Safari iOS
Full support 10 |
Samsung Internet Android
Full support 6.0 |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
See also
ParentNode
andChildNode
ParentNode.append()
Node.appendChild()
Node.insertBefore()
ChildNode.before()
Element.insertAdjacentElement()
NodeList
ParentNode.prepend() by Mozilla Contributors is licensed under CC-BY-SA 2.5.