1.4

Matched element Matched element after script execution
<p id="salesrep">Peter Parker</p> <p id="salesrep">Peter Parker</p>
<p>Lorem ipsum</p>
This script looks up an element with the ID #salesrep, sets its text color to red and inserts a
paragraph after it.
query("#salesrep").after("<p>Lorem ipsum</p>").css("color","red");
Matched element Matched element after script execution
<p id="salesrep">Peter Parker</p> <p id="salesrep"style="color: red;">Peter Parker</p>
<p>Lorem ipsum</p>
Note: the way the functions after() 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 salesrep = query("#salesrep");
salesrep.after("<p>Lorem ipsum</p>");
salesrep.css("color","red");
The following script inserts a paragraph after the elements in the results (the set of HTML
elements that match the selector of the script).
results.after("<p>Lorem Ipsum</p>");
Matched element Matched element after script execution
<p id="salesrep">Peter Parker</p> <p id="salesrep">Peter Parker</p>
<p>Lorem ipsum</p>
This script looks for the string "Lorem " in the results (the set of HTML elements that match the
selector of the script).and inserts the string "ipsum" right after that text. The string is
automatically enclosed in a span.
results.find("Lorem").after("ipsum");
Matched element Matched element after script execution
Page 182