2021.2

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");
prev()
prev() returns the previous sibling of an HTML element, which can be:
l The elements that match the selector of a script (see "results" on page1448).
l One element that matches the selector of a script that runs for "Each matched element"
(see "this" on page1364 and "Setting the scope of a script" on page883).
l The elements returned by a query in the template (see "query()" on page1319).
In HTML, siblings are HTML elements that share the same parent, i.e. HTML elements in the
same container element.
Note that a sibling can be a different type of element. For example, if a paragraph, an image
and a table follow each other in the same Box, they are siblings.
Tip
To get the next sibling, use next() (see "next()" on page1390).
Page 1397