JavaScript之、innerHTML实例讲解

最新推荐文章于 2020-12-12 18:04:42 发布

云之前端

最新推荐文章于 2020-12-12 18:04:42 发布

阅读量569

点赞数 1

分类专栏：学习总结文章标签： innerHTML

本文链接：https://blog.csdn.net/qq_44586361/article/details/86649336

版权

学习总结专栏收录该内容

36 篇文章 0 订阅

订阅专栏

本文通过一个具体的实例讲解innerHTML的用法，分享给大家做参考，具体代码如下：

<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1
{
     width:200px;
     height:100px;
     border:1px solid black;
 }
 </style>
 <script>
 window.function()
 {
      var oTxt=document.getElementById('txt1');
      var oBtn=document.getElementById('btn1');
      var oDiv=document.getElementById('div1');
      oBtn.onclick=function()                               //给按钮添加一个事件
      {
           oDiv.innerHTML=oTxt.value;               //把文本框里面的内容赋值给div里面的内容
       }
   }；
   </script>
   </head>
   <body>
   <input id="txt1" type="text"/>
   <input id="btn1" type="button" value="设置文字"/>
   <div id="div1">
   </div>
   </body>
   </html>

在文本框里面输入内容，点击设置文字，内容就可以显示在下面的内容里面，效果展示如下：
在这里插入图片描述
其中，innerHTML还可以读取html里面的内容：

云之前端

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaScript之、innerHTML实例讲解

本文通过一个具体的实例讲解innerHTML的用法，分享给大家做参考，具体代码如下：&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;&lt;/title&gt;&lt;style&gt;#div1{ width:200px; height:100px; border:1
复制链接

扫一扫