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844).
l
Oneelementthatmatchestheselectorofascriptthatrunsfor"Eachmatchedelement"(see
"this"onpage781and"Settingthescopeofascript"onpage373).
l
Theelementsreturnedbyaqueryinthetemplate(see"query()"onpage742).
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802).
Page 774