《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.8 技巧:使用prepend()和prependTo()添加内容...

    xiaoxiao2024-05-20  112

    本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第3章,第3.8节,作者:【荷】Adriaan de Jonge , 【美】Phil Dutson著,更多章节内容可以访问云栖社区“异步社区”公众号查看

    3.8 技巧:使用prepend()和prependTo()添加内容

    prepend()和prependTo()函数的工作方式几乎同append()和appendTo()函数一样。“在后添加”(append)方式是把新内容放置在选中元素的后面,而以“在前添加”(prepend)方式是把新内容放置在前面。代码清单3-8演示了prepend()和prependTo()函数的用法。

    代码清单3-8 演示prepend()和prependTo()之间的区别

    00 <!DOCTYPE html> 01 02 <html lang="en"> 03 <head> 04  <title>Difference between prepend() and prependTo()</title> 05 </head> 06 <body> 07 08 <div id="prepend-placeholder"> 09  <p>This content is for reference</p> 10 </div> 11 12 <button id="prepend">append()</button><br> 13 14 <div id="prepend-to-placeholder"> 15  <p>This content is for reference</p> 16 </div> 17 18 <button id="prepend-to">prependTo()</button><br> 19 20 <script src="http://code.jquery.com/jquery-latest.min.js"></script> 21 22 <script> 23 // 请将下列代码移至一个外部的.js文件中 24 $(document).ready(function() { 25 26  $('#prepend').click(function() { 27   $('#prepend-placeholder').prepend('<p>Test prepend</p>'); 28  }); 29 30  $('#prepend-to').click(function() { 31   $('<p>Test prependTo()</p>').prependTo('#prepend-to-placeholder'); 32  }); 33 34 }); 35 </script> 36 </body> 37 </html>

    第9行和第15行是帮助识别“在前添加”的文本内容,可以看到添加的内容位于所有已经存在的元素之前。同append()和appendTo()函数一样,prepend()和prependTo()函数的参数可以是DOM元素、HTML字符串、jQuery对象以及函数。

    最新回复(0)