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(...nodesToPrepend);
Parameters
nodesToPrepend
- One or more nodes to insert before the first child node currently in the
ParentNode
. Each node can be specified as either aNode
object or as a string; strings are inserted as newText
nodes.
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 |
---|---|---|
DOM The 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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
prepend | 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.