jquery中函数方法append的用法(附append和preappend的区别)
在web前端开发实际运用中,经常会涉及到一些DOM的操作,今给大家分享一下Jquery中的append函数方法和preappend的用法和区别,
1、append()表示向每个元素内部追加内容
2、prepend()向每个匹配的元素内部前置添加内容
实例代码如下:
<!DOCTYPE HTML> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript" src="jquery-1.7.js"></script> <style type="text/css"> p:hover{ color:red; cursor:pointer; background:blue; } </style> <script type="text/javascript"> <!-- //给每一个p标签内部的末尾添加一个span标签 function f1() { $("p").each(function(){ $(this).append("<span style='color:blue'> 大家好,我是append添加的span标签</span>") }) } //给每一个p标签内部的开头添加一个span标签 function f2() { $("p").each(function(){ $(this).prepend("<span style='color:green'>大家好,我是prepend添加的span标签 </span>") }) } //--> </script> </head> <body> <p>床前明月光</p> <p>疑是地上霜</p> <p>举头望明月</p> <p>低头思故乡</p> </ul> <input type="button" value="append" onclick="f1()"> <input type="button" value="prepend" onclick="f2()"> </body> </html>
除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址:https://tangjiusheng.cn/jQuery/1303.html
原文地址:https://tangjiusheng.cn/jQuery/1303.html