Home > Developer > Web Develop
This section focuses on the common operations of HTNL DOM, including creating nodes, finding nodes, inserting nodes, moving nodes, deleting nodes, and so on.
Next, the specific code:
The comments in the code include some of the points of knowledge that are organized during class:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <Scriptsrc=".. /jquery-3.2.1/jquery-3.2.1.js "></Script> <Scripttype= "Text/javascript"> //jquery Insert Element //after () inserts the content after the matched element $(function() { $("#add"). Click (function() { var$div 4= $("<div id= ' div4 ' >div4</div>"); $("#div2"). After ($div 4)}); }); //InsertAfter () In contrast to After (), with the same meaning //The former is: B.insertafter (a), meaning B is inserted at the back of a //The latter is: A.after (b), which means inserting B after a //before () inserts the content before the matching element $(function() { $("#add"). Click (function() { var$div 4= $("<div id= ' div4 ' >div4</div>"); $("#div2"). Before ($div 4)}); }); //InsertBefore () and before () use opposite, mean the same //The former is: B.insertbefore (A), meaning B is inserted in front of a //The latter is: A.before (b), which means inserting B in front of A //jquery Inserts child elements //append () appends content to the matching element $(function() { $("#add"). Click (function() { var$div 4= $("<div id= ' div4 ' >div4</div>"); $("#div2"). Append ($div 4)}); }); //AppendTo () and append () use opposite, mean the same //prepend () forward content to each element $(function() { $("#add"). Click (function() { var$div 4= $("<div id= ' div4 ' >div4</div>"); $("#div2"). Prepend ($div 4)}); }); //prependto () prepend () use opposite, mean the same //jquery Removal Node //Remove () deletes the entire element and the content contained in the element. $(function() { $("#delete"). Click (function() { $("#div3"). Remove ()}); }); //Empty () empty clears the content contained within the element $(function() { $("#delete"). Click (function() { $("#div3"). Empty ()}); }); </Script> </Head> <Body> <DivID= "Div1">Div1</Div> <DivID= "Div2">Div2</Div> <DivID= "Div3">Div3</Div> <inputtype= "button"name= "Add"ID= "Add"value= "Add Node" /> <inputtype= "button"name= "Delete"ID= "Delete"value= "Delete Node" /> </Body></HTML>
07.31 "JQuery"--3.1jquery implementation of DOM node additions and deletions
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
