This article gives you a way to insert new elements outside of each matching element, and here's a good example, and interested friends can refer to the following
Method Wrap: Wrap all the matching elements in a structured way with other elements Wrapall: Wrap all the matching elements together with a single element Wrapinner: The child of the matching element Class wrapped in HTML structure II, instance (1) wrap code is as follows: <! DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <title>insert Title here</title> <script type= "Text/javascript" src= ". /jquery-2.0.0/jquery-2.0.0.js "></script> <script type=" Text/javascript "> $ (function () { $ ("div a"). Wrap ("<div id= ' id ' ></div>"); }); </script> </head> <body> <div> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu </a> <a>liuxingyu</a> </div> </body> </html> Firebug Display Results: code as follows: <! DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <title>insert Title Here</title> <script src= ". /jquery-2.0.0/jquery-2.0.0.js "type=" Text/javascript "> <script type=" Text/javascript "> </ head> <body> <div> <div id= "id" > <a>liuxingyu</a> </div> <div id= "id" > <a>liuxingyu</a> </div> <div id= "id" > <a>liuxingyu</a> </div> <div id= "id" > <a>liuxingyu</a > </div> </div> </body> </html> (2) wrapall code as follows : <! DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <title>insert Title here</title> <script type= "Text/javascript" src= ". /jquery-2.0.0/jquery-2.0.0.js "></script> <script type=" Text/javascript "> $ (function () { $ ("div a"). Wrapall ("<div id= ' id ' ></div>"); }); </script> </head> <body> <div> <a>liuxingyu</a> <a> liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> </div> </body > </html> Firebug display results: code as follows: <! DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <title>insert Title here</title> <script src= ". /jquery-2.0.0/jquery-2.0.0.js "type=" Text/javascript "> <script type=" Text/javascript "> $ ( function () { $ ("div a"). Wrapall ("<div id= ' id ' ></div>"); }); </script> </ head> <body> <div> <div id= "id" > <a>liuxingyu</a> <a> liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> </div> </div > </body> </html> (3) wrapinner code as follows: <! DOctype html> <html> <head> <meta charset= "UTF-8" > <title>insert Title here</title> <script src= ". /jquery-2.0.0/jquery-2.0.0.js "type=" Text/javascript "> <script type=" Text/javascript "> $ ( function () { $ ("div"). Wrapinner ("<div id= ' id ' ></div>"); }); </script> < /head> <body> <div> <a>liuxingyu</a> <a>liuxingyu</a> < a>liuxingyu</a> <a>liuxingyu</a> </div> </body> </html> Firebug Display results: code as follows: <! DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <title>insert Title here</title> <script src= ". /jquery-2.0.0/jquery-2.0.0.js "type=" Text/javascript "> <script type=" Text/javascript "> $ ( function () { $ ("div"). Wrapinner ("<div id= ' id" ></dIv> "); }); </script> </head> <body> <div> <div id=" ID "> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a> liuxingyu</a> </div> </div> </body> </html> 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
