黑马程序员技术交流社区

标题: jquery中的创建元素/内容 [打印本页]
作者: 冯超    时间: 2014-4-16 08:51
标题: jquery中的创建元素/内容
w3cschool中这么介绍
  jquery动态添加元素节点和内容：

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


添加新的 HTML 内容

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





下面依次介绍这四种属性：
            页面如下：
  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>
复制代码










欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2