2022.2

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 1214