jQuery before()和 insertBefore()示例
时间:2020-02-23 14:46:05 来源:igfitidea点击:
在本教程中,我们将在之前看到jQuery和InsertBefore方法。
两者都执行相同的任务,在每个选定的元素之前插入文本或者html,但语法是完全不同的。
before()的语法:
$("selectors").before("element to be inserted") ;
InsertBefore()的语法:
$("element to be inserted") .insertBefore("div");
让我们通过示例来理解:
<!doctype> <html> <head> <title>Jquery before and insertBefore example </title> <script src="http://code.jquery.com/jquery-2.2.3.min.js"></script> </head> <h2>Jquery before and insertBefore example </h2> <style> .red{ border:3px dotted red; color:red; font-family: arial narrow; } .blue{ border:3px dotted red; color:blue; font-family: arial narrow; } </style> <script type="text/javascript"> $(document).ready(function(){ $("#beforeButton").click(function(){ $("div").before("inserting using before"); }); $("#insertBeforeButton").click(function(){ $("inserting using insertBefore").insertBefore("div"); }); $("#reset").click(function(){ location.reload(); }); }); </script> <body> <button id="beforeButton">Using before</button> <button id="insertBeforeButton">Using insertBefore</button> <button id="reset">Reset</button> <div> Hello world from theitroad!!!! </div> <div> Welcome to JQuery. </div> </body> </html>