jQuery设置和获取span的内容（详解）

今天药忘吃喽~ 2022-06-05 07:15 743阅读 0赞

先看个示例，示例代码如下：

**\[html\]**  view plain  copy

print ?

1.  <html>  
2.    <head>  
3.      <SCRIPT language=JavaScript src="js/jquery.min.js"></SCRIPT>  
4.      <SCRIPT language=JavaScript>  
5.         var test1=$("\#spId").val();  
6.         var test2=$("\#spId").html();  
7.         var test3=$("\#spId").text();  
8.       alert("val的值："  + test1);  
9.       alert("html的值：" + test2);  
10.      alert("text的值：" + test3);  
11.     </script>  
12.   </head>  
13.   <body>  
14.      <span id="spId">aaaa</span>  
15.   </body>  
16. </html>

<html>
      <head>
        <SCRIPT language=JavaScript src="js/jquery.min.js"></SCRIPT>
        <SCRIPT language=JavaScript>
           var test1=$("#spId").val();
           var test2=$("#spId").html();
           var test3=$("#spId").text();
         alert("val的值："  + test1);
         alert("html的值：" + test2);
         alert("text的值：" + test3);
        </script>
      </head>
      <body>
         <span id="spId">aaaa</span>
      </body>
    </html>

alert的结果  如下

【val的值：undefined】

【html的值：null】

【text的值：】

上面三种都没有取得想要的值，之所以没有取到是因为html是从上往下解析的，在解析到js里的$("\#spId")时，下面这个span还不存在，当然就取不到了。  
如果改成下面这样

**\[html\]**  view plain  copy

print ?

1.  <html>  
2.    <head>  
3.      <SCRIPT language=JavaScript src="js/jquery.min.js"></SCRIPT>      
4.    </head>  
5.    <body>  
6.       <span id="spId">aaaa</span>  
7.       <SCRIPT language=JavaScript>  
8.         var test1=$("\#spId").val();  
9.         var test2=$("\#spId").html();  
10.        var test3=$("\#spId").text();  
11.        alert("val的值："  + test1);  
12.        alert("html的值：" + test2);  
13.        alert("text的值：" + test3);  
14.      </script>  
15.   </body>  
16. </html>

<html>
      <head>
        <SCRIPT language=JavaScript src="js/jquery.min.js"></SCRIPT>    
      </head>
      <body>
         <span id="spId">aaaa</span>
         <SCRIPT language=JavaScript>
           var test1=$("#spId").val();
           var test2=$("#spId").html();
           var test3=$("#spId").text();
           alert("val的值："  + test1);
           alert("html的值：" + test2);
           alert("text的值：" + test3);
         </script>
      </body>
    </html>

js在span的后面解析，span就有了。另外，jquery的做法是用ready函数包含这些代码，放哪就无所谓了。它的作用就是在加载完整个页面后才执行包含的js，如：

**\[html\]**  view plain  copy

print ?

1.  <script type="text/javascript">  
2.     $(document).ready(function()\{  
3.         var test1=$("\#spId").val();  
4.         var test2=$("\#spId").html();  
5.         var test3=$("\#spId").text();  
6.         alert("val的值："  + test1);  
7.         alert("html的值：" + test2);  
8.         alert("text的值：" + test3);

**\[html\]**  view plain  copy

print ?

1.  \});  
2.  ;/script>

});
    </script>

一、  
所以，span 的设置和获取如下：

**\[html\]**  view plain  copy

print ?

1.  <html>  
2.  <head>  
3.  <script type="text/javascript" src="/jquery/jquery.js"></script>  
4.  <script type="text/javascript">  
5.  $(document).ready(function()\{  
6.    $("button").click(function()\{  
7.         $("\#spId").text("testSpan");  
8.         alert("text的值：" + $("\#spId").text())  
9.    \});  
10. \});  
11. </script>  
12. </head>  
13. <body>  
14. <div><span id="spId"><a href="\#">aaaa</a></span></div>  
15. <button>切换</button>  
16. </body>  
17. </html>

<html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
           $("#spId").text("testSpan");
           alert("text的值：" + $("#spId").text())
      });
    });
    </script>
    </head>
    <body>
    <div><span id="spId"><a href="#">aaaa</a></span></div>
    <button>切换</button>
    </body>
    </html>

二、

如果想获得html代码，把text换成html就可以了,

**\[html\]**  view plain  copy

print ?

![Center][] ![Center 1][]

设置html，并取得 html， 如下

**\[html\]**  view plain  copy

print ?

1.  <html>  
2.  <head>  
3.  <script type="text/javascript" src="/jquery/jquery.js"></script>  
4.  <script type="text/javascript">  
5.  $(document).ready(function()\{  
6.    $("button").click(function()\{  
7.         alert("text的值：" + $("\#spId").text() + "\\n" +  
8.               "html的值：" + $("\#spId").html() )  
9.    
10.        $("\#spId").text("testSpan")  
11.   
12.        alert("text的值：" + $("\#spId").text() + "\\n"+  
13.              "html的值：" + $("\#spId").html() )  
14.   
15.        $("\#spId").html("<p>testSpantest</p>")  
16.   
17.        alert("text的值：" + $("\#spId").text() + "\\n"+  
18.              "html的值：" + $("\#spId").html() )  
19.   \});  
20. \});  
21. </script>  
22. </head>  
23. <body>  
24. <div><span id="spId"><a href="\#">初期值</a></span></div>  
25.   
26. <button>切换</button>  
27. </body>  
28. </html>

<html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
           alert("text的值：" + $("#spId").text() + "\n" +
                 "html的值：" + $("#spId").html() )
    
           $("#spId").text("testSpan")
    
           alert("text的值：" + $("#spId").text() + "\n"+
                 "html的值：" + $("#spId").html() )
    
           $("#spId").html("<p>testSpantest</p>")
    
           alert("text的值：" + $("#spId").text() + "\n"+
                 "html的值：" + $("#spId").html() )
      });
    });
    </script>
    </head>
    <body>
    <div><span id="spId"><a href="#">初期值</a></span></div>
    
    <button>切换</button>
    </body>
    </html>

结果：

![Center 2][]![Center 3][]![Center 4][]

三、注意点：

**\[html\]**  view plain  copy

print ?

1.  <html>  
2.  <head>  
3.  <script type="text/javascript" src="/jquery/jquery.js"></script>  
4.  <script type="text/javascript">  
5.  $(document).ready(function()\{  
6.    $("button").click(function()\{  
7.         <span style="background-color: rgb(255, 204, 204);">$("\#spId").text("testSpan");</span>  
8.         alert("text的值：" + $("\#spId").text())  
9.         <span style="background-color: rgb(255, 204, 153);">alert("html的值：" + $("\#spId").html())</span>  
10.   \});  
11. \});  
12. </script>  
13. </head>  
14. <body>  
15. <div><span id="spId"><a href="\#">aaaa</a></span></div>  
16.   
17. <button>切换</button>  
18. </body>  
19. </html>

<html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
           <span style="background-color: rgb(255, 204, 204);">$("#spId").text("testSpan");</span>
           alert("text的值：" + $("#spId").text())
           <span style="background-color: rgb(255, 204, 153);">alert("html的值：" + $("#spId").html())</span>
      });
    });
    </script>
    </head>
    <body>
    <div><span id="spId"><a href="#">aaaa</a></span></div>
    
    <button>切换</button>
    </body>
    </html>

结果

![Center 5][]![Center 6][]

此时 ，获取的html()为 【testSpan】，而不是【<a href="\#">testSpan</a>】

[Center]: https://img-blog.csdn.net/20160520095811171?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20220605/576d3778295e40a58ba69be4fa0517de.png
[Center 2]: https://img-blog.csdn.net/20160520101045469?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 3]: https://img-blog.csdn.net/20160520101055383?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 4]: /images/20220605/89c84fde5ca742b3900d151e6f37d39a.png
[Center 5]: https://img-blog.csdn.net/20160520095504891?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 6]: /images/20220605/7ce8c1485ef04426984b2f61277b5ef9.png