1.获取元素文本内容,返回不包含标签的文本
2.设置元素文本内容，重写所有元素的文本内容。
标签也会当成文本处理
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> #box{width: 200px;height: 200px;border: 2px solid black; margin: 50px auto;text-align: center; } button{ width: 200px;height: 50px;margin:0 auto;display: block; } </style> <script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ //1.获取元素文本内容,返回不包含标签的文本 $("button").click(function(){ var zxw1 = $("#box p").text(); var zxw2 = $("#box span").text(); var zxw3 = $("#box").text();//将box元素内部所有的文本获取到 console.log(zxw1); console.log(zxw2); console.log(zxw3); }); }) </script> </head> <body> <div id="box"> <p>我要自学网1</p> <span>我要自学网2</span> </div> <button>点击</button> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> #box{width: 200px;height: 200px;border: 2px solid black; margin: 50px auto;text-align: center; } button{ width: 200px;height: 50px;margin:0 auto;display: block; } </style> <script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ //2.设置元素文本内容，重写所有元素的文本内容。 //标签也会当成文本处理 $("button").click(function(){ var zxw = "51zxw.net"; $("#box p").text(zxw); $("#box span").text("www.51zxw.net"); }); }) </script> </head> <body> <div id="box"> <p>我要自学网1</p> <span>我要自学网2</span> </div> <button>点击</button> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> #box{width: 200px;height: 200px;border: 2px solid black; margin: 50px auto;text-align: center; } button{ width: 200px;height: 50px;margin:0 auto;display: block; } </style> <script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ //2.设置元素文本内容，重写所有元素的文本内容。 //标签也会当成文本处理 $("button").click(function(){ var zxw = "51zxw.net"; //$("#box").text("www.51zxw.net");//直接将box元素内的文本全部覆盖了 $("#box").text("<i>www.51zxw.net</i>"); }); }) </script> </head> <body> <div id="box"> <p>我要自学网1</p> <span>我要自学网2</span> </div> <button>点击</button> </body> </html>
