Insert a new element externally to each Matching Element
This article describes how to insert new elements externally for each matching element. The following is a good example. If you are interested, refer
I. Methods
Wrap: wraps all matching elements in the structure of other elements.
WrapAll: wrap all matching elements with a single element.
WrapInner: Wrap child classes of matching elements in html Structure
Ii. Instances
(1) wrap
The 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>
</Div>
</Body>
</Html>
Firebug display result:
The Code is 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
The 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"). wrapAll ("<div id = 'id'> </div> ");
});
</Script>
</Head>
<Body>
<Div>
<A> liuxingyu </a>
</Div>
</Body>
</Html>
Firebug display result:
The Code is 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>
</Div>
</Div>
</Body>
</Html>
(3) wrapInner
The Code is 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>
</Div>
</Body>
</Html>
Firebug display result:
The Code is 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>
</Div>
</Div>
</Body>
</Html>