prepend()
Insert content at the beginning of one or more HTML elements, which can be:
- The elements that match the selector of a script (see results).
- One element that matches the selector of a script that runs for "Each matched element" (see this and Setting the scope of a script).
- The elements returned by a query in the template (see query()).
See also: append().
prepend(content)
Insert content as the first element to each element in the
set of HTML elements that match the selector of the script or of another query in the template (see query()). Append creates a new result set.
content
HTML string, string or HTML string to insert after the matched elements. In case a plain text string is provided, it is automatically wrapped in a <span> element to avoid orphan text nodes to appear in the <body> element.
Examples
This script inserts a heading as the first element in an element that has the ID #box.
results.prepend("<h1>Personal information</h1>");
| Selector | Matched element | Matched element after script execution |
|---|---|---|
| #box | <div id="box"> <p>Peter Parker</p> </div> |
<div id="box"> <h1>Personal information</h1> <p>Peter Parker</p> </div> |
This script inserts a heading as the first element in an element that has the class name.
results.prepend("<b>Name: </b>");
| Selector | Matched element | Matched element after script execution |
|---|---|---|
| .name | <div> <h1>Personal information</h1> <p class="name">Peter Parker</p> </div> |
<div> <h1>Personal information</h1> <p class="name"><b>Name: </b>Peter Parker</p> </div> |
This script inserts content in multiple <div> elements at the same time.
results.prepend("<h1>Personal information</h1>");
| Selector | Matched element | Matched element after script execution |
|---|---|---|
| div | <div id="box"> <p>Peter Parker</p> </div> <div id="box"> <p>Peter Parker</p> </div> |
<div id="box"> <h1>Personal information</h1> <p>Peter Parker</p> </div> <div id="box"> <h1>Personal information</h1> <p>Peter Parker</p> </div> |
This script prepends a snippet that contains the text "<h1>Personal information</h1>".
var a = loadhtml('snippets/snippet.html');
results.prepend(a);
| Selector | Matched element | Matched element after script execution |
|---|---|---|
| div | <div id="box"> <p>Peter Parker</p> </div> |
<div id="box"> <h1>Personal information</h1> <p>Peter Parker</p> </div> |
This script uses the function query() to find a box. Then it inserts a heading as the first element in that box.
query("#box").prepend("<h1>Personal information</h1>");
| Matched element | Matched element after script execution |
|---|---|
| <div id="box"> <p>Peter Parker</p> </div> |
<div id="box"> <h1>Personal information</h1> <p>Peter Parker</p> </div> |
This script uses the function query() to find a box, prepends a heading and sets the text color of the entire box to red.
query("#box").prepend("<h1>Personal information</h1>").css("color","red");
| Matched element | Matched element after script execution |
|---|---|
| <div id="box"> <p>Peter Parker</p> </div> |
<div id="box" style="color:
red;"> <h1>Personal information</h1> <p>Peter Parker</p> </div> |
Note: The way the functions prepend() and css() are used in this script is called 'chaining'. Chaining is optional; the same could be achieved by storing the result of the query in a variable:
var box = query("#box");
box.prepend("<p>Peter Parker</p>");
box.css("color","red");