Element: prepend() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.
TheElement.prepend() method inserts a set ofNode objects or strings before the first childof theElement. Strings are inserted asequivalentText nodes.
In this article
Syntax
js
prepend(param1)prepend(param1, param2)prepend(param1, param2, /* …, */ paramN)Parameters
param1, …,paramNA set of
Nodeobjects or strings to insert.
Return value
None (undefined).
Exceptions
HierarchyRequestErrorDOMExceptionThrown when the node cannot be inserted at the specified point in the hierarchy.
Examples
>Prepending an element
js
let div = document.createElement("div");let p = document.createElement("p");let span = document.createElement("span");div.append(p);div.prepend(span);console.log(div.childNodes); // NodeList [ <span>, <p> ]Prepending text
js
let div = document.createElement("div");div.append("Some text");div.prepend("Headline: ");console.log(div.textContent); // "Headline: Some text"Prepending an element and text
js
let div = document.createElement("div");let p = document.createElement("p");div.prepend("Some text", p);console.log(div.childNodes); // NodeList [ #text "Some text", <p> ]The prepend method is unscopable
Theprepend() method is not scoped into thewith statement.SeeSymbol.unscopables for more information.
js
let div = document.createElement("div");with (div) { prepend("foo");}// ReferenceError: prepend is not definedSpecifications
| Specification |
|---|
| DOM> # ref-for-dom-parentnode-prepend①> |