28 jQuery——操作元素内容
jquery 操作元素内容的学习
html()--对应innerHTML
获取
对象名.html() //返回当前对象的所有内容包含HTML标签
修改
对象名.html("新的内容") //新的内容会将原有内容覆盖,HTML标签会被解析执行
text()--对应innerText
获取与修改与html()相同
测试代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery操作元素内容</title> <script type="text/javascript" src="js/jQuery-3.4.1.js"></script> <!-- jquery 操作元素内容的学习 html()--对应innerHTML 获取 对象名.html() //返回当前对象的所有内容包含HTML标签 修改 对象名.html("新的内容") //新的内容会将原有内容覆盖,HTML标签会被解析执行 text()--对应innerText 获取与修改与html()相同 --> <script type="text/javascript"> //获取标签内容 function testHtml(){ //获取元素对象 var showdiv = $("#showdiv"); //获取元素的内容 alert(showdiv.html()) // html()相当于innerHTML } //修改标签内容 function testHtml2(){ //获取元素对象 var showdiv = $("#showdiv") //修改元素的内容 showdiv.html("<b>今天天气真好,适合打鬼子<b>"); } //获取标签纯文本内容 function testHtml3(){ //获取元素对象 var showdiv = $("#showdiv"); //获取元素文本内容 alert(showdiv.text()) } //修改标签纯文本内容 function testHtml4(){ //获取元素对象 var showdiv = $("#showdiv"); //修改元素文本内容 showdiv.text("<b>你的良心大大的坏了<b>"); } </script> </head> <body> <h3>jQuery操作元素的内容</h3> <input type="button" name="" id="" value="获取元素内容--html()" onclick="testHtml()"/> <input type="button" name="" id="" value="修改元素内容--html()" onclick="testHtml2()"/> <input type="button" name="" id="" value="获取元素内容--text()" onclick="testHtml3()"/> <input type="button" name="" id="" value="修改元素内容--text()" onclick="testHtml4()"/> <hr> <div id="showdiv"> <b>皇军,前面有八路的干活</b> </div> </body> </html>