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>