jQuery操作文本和增删元素

敲代码敲到头发茂密

已于 2024-03-12 23:54:43 修改

阅读量436

点赞数 2

分类专栏：前端 # JavaScript 文章标签： jquery javascript 前端

于 2022-01-27 07:00:00 首次发布

本文链接：https://blog.csdn.net/YZL40514131/article/details/122618435

版权

前端同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

JavaScript

18 篇文章 2 订阅

订阅专栏

在这里插入图片描述

这里写目录标题

操作文本

原生js 中通过元素.innerText和innerHTML和.value属性操作标签内部文本和内容,
jQuery给我们封装了text(),html()和val()三个方法

innerText >>>> text();
innerHTML >>>> html();
value >>>> val();

案例


<!DOCTYPE html>
<html>
         <head>
                  <meta charset="utf-8">
                  <title></title>
                  <style>
                          #d1{
                                   width: 200px;
                                   height: 200px;
                                   border: 1px solid green;
                          }
                  </style>
                  <script type="text/javascript" src="js/jquery.min.js" ></script>
                  <script>
                          function fun1(){
                          	/*
                          	 * innerText >>>> text();
                          	 * innerHTML >>>> html();
                          	 * value     >>>> val();
                          	 * 
                          	 * */
                          	console.log($("#d1").text())
                          	console.log($("#d1").html())
                          	console.log($("#i1").val())
                          	
                           }
                          
                          function fun2(){
                          	//修改标签内容
                          	$("#d1").text("<h2>自律</h2>")
                          	$("#d1").html("<h2>自律</h2>")
                          }
                          
                          function fun3(){
                          	//清空内容
                          	$("#d1").html("")
                          	$("#d1").empty()
                          	$("#i1").val("")
                          }
                          
                  </script>
         </head>
         <body>
                  <input type="text" value="这里是文字" id='i1' />
                  <div id='d1'>
                          a
                          <span>xxx</span>
                          b
                  </div>
                  <input  type="button" value="获得标签内容" onclick="fun1()"/>
                  <input  type="button" value="修改标签内容" onclick="fun2()"/>
                  <input  type="button" value="删除标签中的内容" onclick="fun3()"/>
         </body>
</html>

增删元素

原生js 中的对于元素的创建,增加和删除代码比较繁琐,而jQuery从元素的创建到元素的增加和删除都给我们提供了更加便捷的方法

创建元素：$('<span>text<span>')

追加元素

append()、appendTo()添加内部标签

before() 、insertBefore() 向前增加标签

after() 、insertAfter() 向后增加标签

删除元素

empty() 清空字标签

remove() 移除当前标签

案例

 <!DOCTYPE html>
<html>
 <head>
          <meta charset="utf-8">
          <title></title>
          <style>
                  #d1{
                           width: 200px;
                           height: 200px;
                           border: 1px solid red;
                           
                  }
          </style>
          <script type="text/javascript" src="js/jquery.min.js" ></script>
          <script>
                  function fun1(){
                  	  // 创建元素
                      var span1=$("<span></span>");
                      // 设置样式
                      span1.css("color","green");
                      span1.css("border","1px solid blue");
                      span1.css("background-color","lightgray")
                      // 设置文字
                      span1.text("今天天气很好");
                      
                      
                      $('#d1').append(span1)
                      
                  }
                  function fun2(){
                      var h =$("<h3>测试文字</h3>").css("color","red").css("border","1px solid green")
                      h.appendTo($('#d1'))
                  }
                  function fun3(){
                      var span1=$('<span style="color: red; border: 1px solid orangered;">测试文字</span>') 
                      $("#d1").before(span1);

                  }
                  function fun4(){
                      var span1=$('<span style="color: red; border: 1px solid orangered;">测试文字</span>') 
                      span1.insertBefore($("#d1"));
                  }
                  function fun5(){
                      var span1=$('<span style="color: red; border: 1px solid orangered;">测试文字</span>') 
                      $("#d1").after(span1);
                  }
                  function fun6(){
                      var span1=$('<span style="color: red; border: 1px solid orangered;">测试文字</span>') 
                      span1.insertAfter($("#d1"));
                  }
                  function fun7(){
                      $("#d1").empty()
                  }
                  function fun8(){
                  	 $("#d1").remove(); // 移除当前元素本身
                  }
          </script>
 </head>
 <body>
 	
 	
          <div id='d1'>
          	
          </div>
          <input type="button" value="testAppend" onclick="fun1()" />
          <input type="button" value="testAppendTo" onclick="fun2()" />
          <input type="button" value="testbefore" onclick="fun3()" />
          <input type="button" value="testinsertBefore" onclick="fun4()" />
          <input type="button" value="testafter" onclick="fun5()" />
          <input type="button" value="testInsertAfter" onclick="fun6()" />
          <input type="button" value="empty" onclick="fun7()" />
          <input type="button" value="remove" onclick="fun8()" />
 </body>
</html>