jquery 元素控制(追加元素/追加内容)介绍及应用

http://blog.csdn.net/gisredevelopment/article/details/41126533

一、在元素内部/外部追加元素

append,prepend:添加到子元素 
before，after：作为兄弟元素添加

html：

1. <div id="content">
2. 在我的后面追加一条新闻
3. </div>

js:

1. <script type="text/javascript">
2. jQuery(function(){
3. //在元素内部追加内容
4. $("#content").append(" 姚明退役了... ");
5. })
6. </script>

在#content里面添加元素，这是把<p>姚明退役了...</p>作为子元素添加到#content，如果想在元素外部追加元素，需要用到after，这样的话就可以把<p>姚明退役了...</p>作为兄弟元素追加到#content后面。

1. <script type="text/javascript">
2. jQuery(function(){
3. //将span添加到追加到content1的后面
4. $("#content").after(" 姚明退役了... ");
5. })
6. </script>

二、在元素的不同位置追加内容

html:

1. <div id="content1" style="border:1px solid red">
2. 窗前明月光
3. </div>
4. <span>疑是地上霜</span>

Js:

1. <script type="text/javascript">
2. jQuery(function(){
3. //将span添加到追加到content1的后面
4. $("span").appendTo("#content1");
5. })
6. </script>

三、在元素的开始位置追加内容

html：

1. <div>
2. <div id="content">
3. 在我的后面追加一条新闻
4. </div>

js:

1. <script type="text/javascript">
2. jQuery(function(){
3. //在元素的开始位置追加内容
4. $("#content").prepend(" 头部 ");
5. })
6. </script>

四、在不同元素的开始位置追加内容

html：

1. <div id="content">
2. 在我的后面追加一条新闻
3. </div>
4. <span>疑是地上霜</span>

js:

1. <script type="text/javascript">
2. jQuery(function(){
3. //在不同元素的开始位置追加内容
4. $("span").prependTo("#content");
5. })
6. </script>

在#content里面添加元素，这是把<span>疑是地上霜</span>作为子元素添加到#content开始地方，如果想在元素外部添加开始元素，需要用到before，这样的话就可以把<span>疑是地上霜</span>作为兄弟元素追加到#content开始了

1. <script type="text/javascript">
2. jQuery(function(){
3. //在不同元素的开始位置追加内容
4. $("span").before("#content");
5. })
6. </script>

五、用指定结构的元素包含元素

Warp(html) 
在指定的html中指定html元素，但指定的元素中不可含有兄弟元素，否则不能正常的运行，并且不含有一般文本字符串，下面的代码用div标签包含p标签。

html:

1. <form id="form1" runat="server">
2. <span>将我包含在div中</span>
3. </form>

js:

1. <script type="text/javascript">
2. jQuery(function(){
3. $("span").wrap("<b></b>");
4. })
5. </script>

六、用指定的元素包含多个html元素

wrapAll(html)

html：

1. <form id="form1" runat="server">
2. p内容
3. p内容
4. p内容
5. p内容
6. p内容
7. </form>

js:

1. <script type="text/javascript">
2. jQuery(function(){
3. $("p").wrapAll("<div style='border:1px solid red'>  </div>");
4. })
5. </script>

七、用指定的标签包含子元素

wrapInner(html) 
与warp方法一样，在html中指定html元素，例如： 
用b标签包含p标签中文字的代码如下：

html:

1. <p>将p标签的文字用b标签包含起来</p>
2. <p>也将p标签的文字用b标签包含起来</p>

js:

1. javascript
2. <script type="text/javascript">
3. jQuery(function(){
4. $("p").wrapInner("<b></b>");
5. })
6. </script>