JavaScript 使用innerHTML获取和更新

示例 

innerHTML不仅包含文本，还包含子元素标签。

 1 <!DOCTYPE html>
 2 <html>
 3  <head>
 4      <title>innerHTML获取和更新</title>
 5      <meta charset="UTF-8">
 6      <meta name="viewport" content="width=device-width, initial-scale=1.0">   
 7  </head>
 8   <body>
 9     <ul id="ul">
10          <li id="ali">油条</li>
11          <li id="bli">包子</li>
12          <li id="cli">米饺</li>
13          <li id="dli">鱼粉</li>
14     </ul>
15      <!--按钮 onclick当点击按钮时，执行一段JavaScript代码-->
16     <button onclick="gaibianyangshi()">点击</button>
17     
18     <script>
19         function gaibianyangshi(){
20              //获取ID为dli元素
21             var a = document.getElementById('dli');
22             //获取刚获取的值 ---鱼粉
23              var value = a.innerHTML;
24              
25              //alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框
26              alert("获取到的值是："+value);
27              
28              //当你按下提示框中的"确定"时,鱼粉将更新为三鲜粉
29              a.innerHTML="<span style='color:red'>三鲜粉</span>";
30          
31         }
32     </script>
33   </body>
34 </html>

 

posted @ 2019-07-12 18:35  JackSon~鹤  阅读(1343)  评论(0)  编辑  收藏  举报