2022.2

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'.Chain-
ing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1301).
l
Oneelementthatmatchestheselectorofascriptthatrunsfor"Eachmatchedelement"(see
"this"onpage1237and"Settingthescopeofascript"onpage813).
l
Theelementsreturnedbyaqueryinthetemplate(see"query()"onpage1197).
InHTML,siblingsareHTMLelementsthatsharethesameparent,i.e.HTMLelementsinthesamecon-
tainer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1258).
Page 1264