A股上市公司传智教育（股票代码 003032）旗下技术交流社区北京昌平校区

传智教育官网黑马程序员官网

 找回密码
 加入黑马

QQ登录

只需一步，快速开始

论坛首页 › 隐藏归类 › 黑马那些年 › 第10届JavaEE+hadoop大数据技术交流 › 正文

jquery中的创建元素/内容

© 冯超 高级黑马   /  2014-4-16 08:51  /  936 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

w3cschool中这么介绍
  jquery动态添加元素节点和内容：

通过 jQuery，可以很容易地添加新元素/内容。


添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容




下面依次介绍这四种属性：
            页面如下：
  1. <body>
  2.         <h1 id="test" align="center">   这个是一个h1标签    </h1>
  3. </body>
复制代码

关于append方法：
     $("#test").append("<h1 id='t'>sss</h1>");
html页面变为:
                                                <h1 id="test" align="center">   这个是一个h1标签
                                                        <h1 id='t'>sss</h1>
                                                </h1>


关于prepend方法：
    $("#test").prepend("<h1 id='t'>sss</h1>");
html页面变为:
                                                <h1 id="test" align="center">
                                                        <h1 id='t'>sss</h1>
                                                           这个是一个h1标签
                                                </h1>

关于after方法：
    $("#test").after("<h1 id='t'>sss</h1>");
html页面变为:
                                                <h1 id="test" align="center">
                                                           这个是一个h1标签
                                                </h1>
                                                <h1 id='t'>sss</h1>       


关于before方法：
[size=13.333333969116211px]     $("#test").[size=13.333333969116211px]before[size=13.333333969116211px]("<h1 id='t'>sss</h1>");
html页面变为:
                                                <h1 id="test" align="center">
                                                           这个是一个h1标签
                                                </h1>



完毕。
我的测试页面如下：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6.         <script type="text/javascript" src="jquery-2.0.3.js"></script>
  7. </head>

  9. <script type="text/javascript">
  10.          $(document).ready(function(e) {
  11.        //append() - 在被选元素的结尾插入内容
  12.                                    /*
  13.                                         html页面变为:
  14.                                                 <h1 id="test" align="center">   这个是一个h1标签
  15.                                                         <h1 id='t'>sss</h1>
  16.                                                 </h1>
  17.                                 */
  18.                          //$("#test").append("<h1 id='t'>sss</h1>");
  19.           
  20.            //prepend() - 在被选元素的开头插入内容
  21.                                    /*
  22.                                         html页面变为:
  23.                                                 <h1 id="test" align="center">
  24.                                                         <h1 id='t'>sss</h1>
  25.                                                            这个是一个h1标签
  26.                                                 </h1>
  27.                                 */
  28.                            //$("#test").prepend("<h1 id='t'>sss</h1>");
  29.                 //after() - 在被选元素之后插入内容
  30.                                 /*
  31.                                         html页面变为:
  32.                                                 <h1 id="test" align="center">
  33.                                                            这个是一个h1标签
  34.                                                 </h1>
  35.                                                 <h1 id='t'>sss</h1>       
  36.                                 */
  37.                         //$("#test").after("<h1 id='t'>sss</h1>");       
  38.                 //before() - 在被选元素之前插入内容                       
  39.                                 /*
  40.                                         <h1 id='t'>sss</h1>       
  41.                                         html页面变为:
  42.                                                 <h1 id="test" align="center">
  43.                                                            这个是一个h1标签
  44.                                                 </h1>
  45.                                 */
  46.                         $("#test").before("<h1 id='t'>sss</h1>");
  47.                        
  48.     });

  50. </script>
  51. <body>
  52.         <h1 id="test" align="center">   这个是一个h1标签    </h1>
  53. </body>
  54. </html>
复制代码






jquery元素

0 个回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 加入黑马