zoukankan      html  css  js  c++  java
  • jQuery HTML 操作 改变/添加文本值

    1、JQuery 改变p中的文本值

    <html>
    <head>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
      $("p").html("Update text");
      });
    });
    </script>
    </head>
    
    <body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button type="button">Click here</button>
    </body>
    
    </html>
    

     2、JQuery 添加p中的文本值

    <html>
    <head>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
      $("p").append(" Append text");
      });
    });
    </script>
    </head>
    
    <body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button type="button">请点击这里</button>
    </body>
    
    </html>
    

     3、after() 函数在所有匹配的元素之后插入 HTML 内容

    <html>
    <head>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
    
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
      $("p").after(" Add  content.");
      });
    });
    </script>
    </head>
    
    <body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button type="button">Click here</button>
    </body>
    
    </html>
    

     4、jQuery HTML 操作

    函数描述
    $(selector).html(content) 改变被选元素的(内部)HTML
    $(selector).append(content) 向被选元素的(内部)HTML 追加内容
    $(selector).prepend(content) 向被选元素的(内部)HTML “预置”(Prepend)内容
    $(selector).after(content) 在被选元素之后添加 HTML
    $(selector).before(content) 在被选元素之前添加 HTML
  • 相关阅读:
    1070 结绳
    1069 微博转发抽奖
    1068 万绿丛中一点红
    1067 试密码
    1066 图像过滤
    1065 单身狗
    CSS--文本溢出与换行
    css--滤镜filter
    css--flex布局
    css--table布局
  • 原文地址:https://www.cnblogs.com/linlf03/p/2309666.html
Copyright © 2011-2022 走看看