Js innerHTML div内多次打印一个元素文本实现

最新推荐文章于 2023-07-07 14:26:24 发布

SankeSShu

最新推荐文章于 2023-07-07 14:26:24 发布

阅读量484

点赞数 2

分类专栏： JavaScriptDemo

本文链接：https://blog.csdn.net/weixin_44960612/article/details/89886163

版权

JavaScriptDemo 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一开始就这样简单粗暴的写结果实现的效果永远是替换当前div内容

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>setInterval()</title>
        <style type="text/css">
            div{
                width:300px;
                height:300px;
                border:1px solid #333;
            }
        </style>
    </head>
    <body>
        <input type="button" value="开始">
        <br><br>
        <div></div>
        <script type="text/javascript">
          var a = document.getElementsByTagName("input")[0],
              b = document.getElementsByTagName("div")[0];
            a.onclick = function(){
              var time = setInterval(function(){
                b.innerHTML = 'hello'  ;
            },1000);
          }
        </script>
    </body>
</html>

在这里插入图片描述
这特么难道是变量问题

代码中间加了一行

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>setInterval()</title>
        <style type="text/css">
            div{
                width:300px;
                height:300px;
                border:1px solid #333;
            }
        </style>
    </head>
    <body>
        <input type="button" value="开始">
        <br><br>
        <div></div>
        <script type="text/javascript">
          var a = document.getElementsByTagName("input")[0],
              b = document.getElementsByTagName("div")[0];
              var c = 'hello';
            a.onclick = function(){
              var time = setInterval(function(){
                b.innerHTML = ’c‘  ;
            },1000);
          }
        </script>
    </body>
</html>

在这里插入图片描述
这特么还是不行。
我就使用了 c = c+c;
竟然可以重复添加两个。

那也就是说
初始值如果有参数
innerHTML就会默认只是覆盖当前参数

所以如果是空值 innerHTML 就会插入新元素。

代码如下

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>setInterval()</title>
        <style type="text/css">
            div{
                width:300px;
                height:300px;
                border:1px solid #333;
            }
        </style>
    </head>
    <body>
        <input type="button" value="开始">
        <br><br>
        <div></div>
        <script type="text/javascript">
          var a = document.getElementsByTagName("input")[0],
              b = document.getElementsByTagName("div")[0];
              var q = " ";
              var i = 'hello'；
            a.onclick = function(){
              var time = setInterval(function(){
                q = q + i ;
                b.innerHTML = q  ;
            },1000);
          }
        </script>
    </body>
</html>

我理解是这样，如果有大神给科普更好感谢。

SankeSShu

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Js innerHTML div内多次打印一个元素文本实现

一开始就这样简单粗暴的写结果实现的效果永远是替换当前div内容<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title>setInterval()</title> <style ...
复制链接

扫一扫