首页 > 语言 > JavaScript > 正文

jQuery使用prepend()方法在元素前添加内容用法实例

2024-05-06 16:17:39
字体:
来源:转载
供稿:网友

这篇文章主要介绍了jQuery使用prepend()方法在元素前添加内容的方法,实例分析了prepend方法追加内容的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery使用prepend()方法在元素前添加内容的用法。分享给大家供大家参考。具体分析如下:

下面的代码可实现在文本前和列表前添加新的元素

 

 
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <script src="js/jquery.min.js"
  5. </script> 
  6. <script> 
  7. $(document).ready(function(){ 
  8. $("#btn1").click(function(){ 
  9. $("p").prepend("<b>Prepended text</b>. "); 
  10. }); 
  11. $("#btn2").click(function(){ 
  12. $("ol").prepend("<li>Prepended item</li>"); 
  13. }); 
  14. }); 
  15. </script> 
  16. </head> 
  17. <body> 
  18. <p>This is a paragraph.</p> 
  19. <p>This is another paragraph.</p> 
  20. <ol> 
  21. <li>List item 1</li> 
  22. <li>List item 2</li> 
  23. <li>List item 3</li> 
  24. </ol> 
  25. <button id="btn1">Prepend text</button> 
  26. <button id="btn2">Prepend list item</button> 
  27. </body> 
  28. </html> 

希望本文所述对大家的jQuery程序设计有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选