<html> <head> <title>js操作元素内容学习</title> <meta charset="UTF-8"/> <!--声明css--> <style type="text/css"> #div01{ width: 200px; height: 200px; border: solid 1px orange; } </style> <!-- 操作元素内容学习: 获取元素对象 获取 元素对象名.innerHTML//返回当前元素对象的所有内容,包括HTML标签 元素对象名.innerHTML//返回当前元素对象的文本内容,不包括HTML标签 修改 元素对象名.innerHTML="新的值"//会将原有内容覆盖,并HTML标签会被解析 元素对象名.innerHTML=元素对象名.innerHTML+"新的值"//追加效果 元素对象名.innerText="新的值"//会将原有内容覆盖,但HTML标签不会被解析,会作为普通文本显示。 --> <!--声明js代码域--> <script type="text/javascript"> //获取元素内容 function getContext(){ //获取元素对象 var div=document.getElementById("div01"); //获取元素内容 alert(div.innerHTML); alert(div.innerText); } //修改元素内容 function updateContext(){ //获取元素对象 var div=document.getElementById("div01"); //修改元素对象内容 div.innerHTML="<b>你先上,皇军给你殿后,八嘎</b>"; } function updateContext2(){ //获取元素对象 var div=document.getElementById("div01"); //修改元素对象内容 div.innerText="<b>你先上,皇军给你殿后,八嘎</b>"; } </script> </head> <body> <h3>js操作元素内容学习</h3> <input type="button" name="" id="" value="测试获取元素内容---innerHTML&innerText" οnclick="getContext()"/> <input type="button" name="" id="" value="测试修改元素内容--innerHTML" οnclick="updateContext()"/> <input type="button" name="" id="" value="测试修改元素内容--innerText" οnclick="updateContext2()"/> <hr /> <div id="div01"> <b>皇军,前面有八路的干活。</b> <b>皇军,前面有八路的干活。</b> </div> </body> </html>
js操作元素内容学习
于 2019-10-10 21:16:30 首次发布