jQuery 创建和插入元素

其他 2018-11-12 11:29:29 阅读次数: 0

原文链接

一、使用jQuery创建元素

1、创建元素

[javascript] view plain copy 在CODE上查看代码片派生到我的代码片

  1. $(function(){  
  2. var $h1=$(“<h1></h1>”);  
  3. $(“body”).append($h1);  
  4. })  

2、创建文本

[javascript] view plain copy 在CODE上查看代码片派生到我的代码片

  1. $(function(){  
  2. var $h1=$(“<h1>DOM文档对象模型</h1>”);  
  3. $(“body”).append($h1);  
  4. })  

3、创建属性

[javascript] view plain copy 在CODE上查看代码片派生到我的代码片

  1. $(function(){  
  2. var $h1=$(“<h1 title=“一级标题”  class=“red”>DOM文档对象模型</h1>”);  
  3. $(“body”).append($h1);  
  4. })  

二、使用jQuery插入元素

1、在节点内部插入内容

（1）、append()方法在被选元素的结尾（仍然在内部）插入指定内容

   提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容的位置和选择器。

        语法：$(selector).append(content)

   content必需。规定要插入的内容（可包含 HTML 标签）。

[html] view plain copy 在CODE上查看代码片派生到我的代码片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("button").click(function(){  
  7.     $("p").append(" <b>Hello world!</b>");  
  8.   });  
  9. });  
  10. </script>  
  11. </head>  
  12. <body>  
  13. <p>This is a paragraph.</p>  
  14. <p>This is another paragraph.</p>  
  15. <button>在每个 p 元素的结尾添加内容</button>  
  16. </body>  
  17. </html>  

  使用函数来附加内容，使用函数在指定元素的结尾插入内容。

        语法：$(selector).append(function(index,html))

  function(index,html) 必需。规定返回待插入内容的函数。

  index - 可选。接收选择器的 index 位置。

  html - 可选。接收选择器的当前 HTML。

[html] view plain copy 在CODE上查看代码片派生到我的代码片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("button").click(function(){  
  7.     $("p").append(function(n){  
  8.       return "<b>This p element has index " + n + "</b>";  
  9.     });  
  10.   });  
  11. });  
  12. </script>  
  13. </head>  
  14. <body>  
  15. <h1>This is a heading</h1>  
  16. <p>This is a paragraph.</p>  
  17. <p>This is another paragraph.</p>  
  18. <button>在每个 p 元素的结尾添加内容</button>  
  19. </body>  
  20. </html>  


（2）、appendTo()方法在被选元素的结尾（仍然在内部）插入指定内容

  提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。

       语法：$(content).appendTo(selector)

  content必需。规定要插入的内容（可包含 HTML 标签）。

  selector必需。规定把内容追加到哪个元素上。

[html] view plain copy 在CODE上查看代码片派生到我的代码片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("button").click(function(){  
  7.     $("<b> Hello World!</b>").appendTo("p");  
  8.   });  
  9. });  
  10. </script>  
  11. </head>  
  12. <body>  
  13. <p>This is a paragraph.</p>  
  14. <p>This is another paragraph.</p>  
  15. <button>在每个 p 元素的结尾添加内容</button>  
  16. </body>  
  17. </html>  

（3）、prepend() 方法在被选元素的开头（仍位于内部）插入指定内容

  提示：prepend() 和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prependTo() 无法使用函数来插入内容。

        语法：$(selector).prepend(content)

  content必需。规定要插入的内容（可包含 HTML 标签）。

[html] view plain copy 在CODE上查看代码片派生到我的代码片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("button").click(function(){  
  7.     $("p").prepend("<b>Hello world!</b> ");  
  8.   });  
  9. });  
  10. </script>  
  11. </head>  
  12. <body>  
  13. <p>This is a paragraph.</p>  
  14. <p>This is another paragraph.</p>  
  15. <button>在每个 p 元素的开头插入内容</button>  
  16. </body>  
  17. </html>  


  使用函数来附加内容，使用函数在被选元素的开头插入指定的内容。

        语法：$(selector).prepend(function(index,html))

  function(index,html) 必需。规定返回待插入内容的函数。

  index - 可选。接受选择器的 index 位置。

  html - 可选。接受选择器的当前 HTML。

[html] view plain copy 在CODE上查看代码片派生到我的代码片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("button").click(function(){  
  7.     $("p").prepend(function(n){  
  8.       return "<b>这个 p 元素的 index 是：" + n + "</b> ";  
  9.     });  
  10.   });  
  11. });  
  12. </script>  
  13. </head>  
  14. <body>  
  15. <h1>这是一个标题</h1>  
  16. <p>这是一个段落。</p>  
  17. <p>这是另一个段落。</p>  
  18. <button>在每个 p 元素的开头插入内容</button>  
  19. </body>  
  20. </html>  

（4）、prependTo() 方法在被选元素的开头（仍位于内部）插入指定内容

  提示：prepend() 和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prepend() 能够使用函数来插入内容。

         语法：$(content).prependTo(selector)

  content 必需。规定要插入的内容（可包含 HTML 标签）。

  selector 必需。规定在何处插入内容。

[html] view plain copy 在CODE上查看代码片派生到我的代码片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $(".btn1").click(function(){  
  7.     $("<b>Hello World!</b>").prependTo("p");  
  8.   });  
  9. });  
  10. </script>  
  11. </head>  
  12. <body>  
  13. <p>This is a paragraph.</p>  
  14. <p>This is another paragraph.</p>  
  15. <button class="btn1">在每个 p 元素的开头插入文本</button>  
  16. </body>  
  17. </html>  


2、在节点外部插入内容

（1）、after() 方法在被选元素后插入指定的内容

       语法：$(selector).after(content)

   content必需。规定要插入的内容（可包含 HTML 标签）。

[html] view plain copy 在CODE上查看代码片派生到我的代码片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("button").click(function(){  
  7.     $("p").after("<p>Hello world!</p>");  
  8.   });  
  9. });  
  10. </script>  
  11. </head>  
  12. <body>  
  13. <p>This is a paragraph.</p>  
  14. <button>在每个 p 元素后插入内容</button>  
  15. </body>  
  16. </html>  


  使用函数来插入内容，使用函数在被选元素之后插入指定的内容。

        语法：$(selector).after(function(index))

  function(index) 必需。规定返回待插入内容的函数。

  index - 可选。接收选择器的 index 位置。

[html] view plain copy 在CODE上查看代码片派生到我的代码片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("button").click(function(){  
  7.     $("p").after(function(n){  
  8.       return "<p>The p element above has index " + n + "</p>";  
  9.     });  
  10.   });  
  11. });  
  12. </script>  
  13. </head>  
  14. <body>  
  15. <h1>This is a heading</h1>  
  16. <p>This is a paragraph.</p>  
  17. <p>This is another paragraph.</p>  
  18. <button>在每个 p 元素后插入内容</button>  
  19. </body>  
  20. </html>  


（2）、before() 方法在被选元素前插入指定的内容

        语法：$(selector).before(content)

    content 必需。规定要插入的内容（可包含 HTML 标签）。

[html] view plain copy 在CODE上查看代码片派生到我的代码片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $(".btn1").click(function(){  
  7.     $("p").before("<p>Hello world!</p>");  
  8.   });  
  9. });  
  10. </script>  
  11. </head>  
  12. <body>  
  13. <p>This is a paragraph.</p>  
  14. <button class="btn1">在每个段落前面插入新的段落</button>  
  15. </body>  
  16. </html>  


  使用函数来插入内容，使用函数在指定的元素前面插入内容。

     语法：$(selector).before(function(index))

  function(index)必需。规定返回待插入内容的函数。

  index - 可选。接收选择器的 index 位置。

[html] view plain copy 在CODE上查看代码片派生到我的代码片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("button").click(function(){  
  7.     $("p").before(function(n){  
  8.       return "<p>The p element below has index " + n + "</p>";  
  9.     });  
  10.   });  
  11. });  
  12. </script>  
  13. </head>  
  14. <body>  
  15. <h1>This is a heading</h1>  
  16. <p>This is a paragraph.</p>  
  17. <p>This is another paragraph.</p>  
  18. <button class="btn1">在每个段落前面插入新的段落</button>  
  19. </body>  
  20. </html>  


（3）、insertAfter()把匹配的元素插入到另一个指定的元素集合的后面

  注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。

       语法：$(content).insertAfter(selector)

  content必需。规定要插入的内容。可能的值：选择器表达式、HTML 标记

  selector必需。规定在何处插入被选元素。

[html] view plain copy 在CODE上查看代码片派生到我的代码片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("button").click(function(){  
  7.     $("<span>你好！</span>").insertAfter("p");  
  8.   });  
  9. });  
  10. </script>  
  11. </head>  
  12. <body>  
  13. <p>这是一个段落。</p>  
  14. <p>这是另一个段落。</p>  
  15. <button>在每个 p 元素之后插入 span 元素</button>  
  16. </body>  
  17. </html>  


插入已有的元素

[html] view plain copy 在CODE上查看代码片派生到我的代码片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("button").click(function(){  
  7.     $("h1").insertAfter("p");  
  8.   });  
  9. });  
  10. </script>  
  11. </head>  
  12. <body>  
  13. <h1>这是一个标题</h1>  
  14. <p>这是一个段落。</p>  
  15. <p>这是另一个段落。</p>  
  16. <button>在每个 p 元素之后插入 h1 元素</button>  
  17. </body>  
  18. </html>  


（4）、insertBefore()把匹配的元素插入到另一个指定的元素集合的前面

   注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之前。

        语法：$(content).insertBefore(selector)

   content 必需。规定要插入的内容。可能的值：选择器表达式、HTML 标记

   selector 必需。规定在何处插入被选元素。

[html] view plain copy 在CODE上查看代码片派生到我的代码片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("button").click(function(){  
  7.     $("<span>你好！</span>").insertBefore("p");  
  8.   });  
  9. });  
  10. </script>  
  11. </head>  
  12. <body>  
  13. <p>这是一个段落。</p>  
  14. <p>这是另一个段落。</p>  
  15. <button>在每个 p 元素之前插入 span 元素</button>  
  16. </body>  
  17. </html>  


猜你喜欢

转载自blog.csdn.net/u012793120/article/details/60743137
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022