<! DOCTYPE html>. x{color:red;}. Xx{color:pink;}</style>$ (document). Ready (function(){ $("#but1"). Click (function(){ $("P"). Prepend ("<d> Front </d>"); });//Get the D element to the back of P$ ("#but2"). Click (function(){ $("P"). Append ("<f> back </f>") });//Get the F element to the back of P$ ("#but3"). Click (function(){ $("D"). Prependto ("div").); });//Get the D element to the front of the Div$ ("#but4"). Click (function(){ $("F"). AppendTo ("div").); });//Get the q element back in the div$ ("#but5"). Click (function(){ $("P"). Before ("<z> front </z>"); });//Get The S element to the front of P$ ("#but6"). Click (function(){ $("P"). After ("<x> back </x>"); });//Get The S element back to P$ ("#but7"). Click (function(){ $("Z"). InsertBefore ("div").); });//set the contents of all P elements$ ("#but8"). Click (function(){ $("X"). InsertAfter ("div").); });//returns the text content of the P element. });</script> <input id= "but1" type= "button" value= "front" > <input id= "but2" type= "button" value= "Inside Back" > <input id= "but3" type= "button" value= "before change position" > <input id= "but4" type= "button" value= "after change Position "> <input id=" but5 "type=" button "value=" Outside Front "> <input id=" but6 "type=" button "value= "Out Back" > <input id= "but7" type= "button" value= "Change out of position" > <input id= "but8" type= "button" value = "Change out of position" > <br/> <div>xxx</div> <br/> <p>yyy</p> </body>
jquery-Document Processing