zoukankan      html  css  js  c++  java
  • after、append和appendTo三个函数的用法和区别

    1、after函数

    定义和用法:

    after() 方法在被选元素后插入指定的内容。

    语法:

    <html>
    <head>
      <script type="text/JavaScript" src="/jQuery/jquery.js"></script>
      <script type="text/javascript">
        $().ready(function(){
          $("button").click(function(){
            $("span").after("<a href="#">ddddd</a>")
    
          })
        })
      </script>
    </head>
    
    <body>
      <span>aaaaaaaaaaaaaaa</span>
      <button>after函数</button>
    </body>
    </html>
    
    结果如下:
    
    <span>aaaaaaaaaaaaaaa</span>
    <a href="#">ddddd</a>
    
    span标签后面多了一个a标签

    2、append函数

    定义和用法:

    append() 方法在被选元素的结尾(仍然在内部)插入指定内容。

    语法:

    $(selector).append(content)
    实例:
    <html>
    <head>
      <script type="text/javascript" src="/jquery/jquery.js"></script>
      <script type="text/javascript">
        $().ready(function(){
          $("button").click(function(){
            $("span").append("<a href="#">ddddd</a>")
    
          })
        })
      </script>
    </head>
    
    <body>
      <span>aaaaaaaaaaaaaaa</span>
      <button>after函数</button>
    </body>
    </html>
    
    结果如下:
    
    <span>aaaaaaaaaaaaaaa<a href="#">ddddd</a></span>
    span标签里面多了一个a标签

    3、appendTo函数

    定义和用法:

    appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。

    语法:

    $(content).appendTo(selector)实例:
    <html>
    <head>
      <script type="text/javascript" src="/jquery/jquery.js"></script>
      <script type="text/javascript">
        $().ready(function(){
          $("button").click(function(){
            // $("span").appendTo("<a href="#">ddddd</a>"),这样的写法是不正确的
    
            $("<a href="#">ddddd</a>").appendTo("span")
    
          })
        })
      </script>
    </head>
    
    <body>
      <span>aaaaaaaaaaaaaaa</span>
      <button>after函数</button>
    </body>
    </html>
    
    结果如下:
    
    <span>aaaaaaaaaaaaaaa<a href="#">ddddd</a></span>
    span标签里面多了一个a标签
    
    效果和append函数是一样,只不过它们的写法是反着来写的而已

    备注:before函数与after函数相反,表示是元素的前面加入指定元素

    引用地址:https://www.cnblogs.com/henuyuxiang/p/6874794.html

  • 相关阅读:
    改造vant日期选择
    css3元素垂直居中
    npm综合
    (转)网页加水印方法
    Mac下IDEA自带MAVEN插件的全局环境配置
    隐藏注册控件窗口
    High performance optimization and acceleration for randomWalk, deepwalk, node2vec (Python)
    How to add conda env into jupyter notebook installed by pip
    The Power of WordNet and How to Use It in Python
    背单词app测评,2018年
  • 原文地址:https://www.cnblogs.com/Dumb-dog/p/11957521.html
Copyright © 2011-2022 走看看