2020.1

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");
remove()
Removes the current element or each element in a set from the DOM.
This function returns a new result set containing each removed element. These can be
changed and inserted in the document. This could be beneficial in terms of performance, as
manipulating elements inside the DOM is relatively time consuming.
Page 828