1.6

Matched element Matched element after script execution
<p id="salesrep">Peter Parker</p> <p>Lorem ipsum</p>
<p id="salesrep">Peter Parker</p>
The following script looks for an element with the ID salesrep, inserts a paragraph before that
element and colors that element red.
query("#salesrep").before("<p>Lorem ipsum</p>").css("color","red");
Matched element Matched element after script execution
<p id="salesrep">Peter Parker</p> <p >Lorem ipsum</p>
<p id="salesrep"style="color: red;">Peter Parker</p>
Note: the way the functions before() 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.before("<p>Lorem ipsum</p>");
salesrep.css("color","red");
The following script searches the results for the string "ipsum" and puts "Lorem " before it.
"Lorem " is automatically wrapped in a Span element.
results.find("ipsum").before("Lorem ");
Matched element Matched element after script execution
<p>ipsumdolor sit amet, consectetur
adipiscing elit.</p>
<p><span>Lorem </span>ipsumdolor sit amet,
consectetur adipiscing elit.</p>
The following script looks for an element with the ID salesrep and inserts the text "Lorem
Ipsum" before that element. "Lorem Ipsum" is automatically wrapped in a Span element.
query("#salesrep").before("Lorem Ipsum");
Page 438