JavaScript之innerHTML

Posted 静心*尽力

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript之innerHTML相关的知识,希望对你有一定的参考价值。

一.初认识

innerHTML是元素里的文字 换行 标签...
innerHTML可进行读操作
格式:变量名.innerHTML
innerHTML可进行写操作
格式:变量名.innerH=值(可是文字,也可是标签)


 

二.innerHTML的读操作示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>InnerHtml</title>
 6 </head>
 7 <body>
 8     <input type="button" value="onclickMe" id="点我">
 9     <div id="box">
10        <span>猝然临之而不惊</span>
11     </div>
12 </body>
13 </html>
14 <script type="text/javascript">
15     /*获取对应元素id*/
16     var button=document.getElementById(\'点我\');
17     var box=document.getElementById(\'box\');
18     // 读操作
19     alert(box.innerHTML);        
20 </script>

上述代码在通过元素id获取了元素区域(div区域)后,进行读操作

 alert(box.innerHTML); 
效果:

 

 

 因为div中的内容是:

<span>猝然临之而不惊</span>所以它把标签也显示出来了

三.innerHTML的写操作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>InnerHtml</title>
</head>
<body>
    <input type="button" value="onclickMe" id="点我">
    <div id="box">
       <span>猝然临之而不惊</span>
    </div>
</body>
</html>
<script type="text/javascript">
    /*获取对应元素id*/
    var button=document.getElementById(\'点我\');
    var box=document.getElementById(\'box\');
    // 写操作
    button.onclick=function(){
         box.innerHTML=\'无故加之而不怒\';
    };         
</script>

对照着理解一下,写操作的格式:变量名.innerHTML=\'新值\';

点击按钮前:

 

点击按钮后的效果:

 



温馨小提示,进行写操作时,会清空元素区的所有内容,即此时div的原本内容\'<span>猝然临之而不惊</span>\'被全部清除,综上所诉,写操作又可以理解为替换:用新值替换旧值

四.innerHTML的一个小例子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>InnerHtml</title>
    <style type="text/css">
    img{
        width: 400px;
        height: 400px;
    }
    </style>
</head>
<body>
    <input type="button" value="onclickMe" id="点我">
    <div id="box">
    </div>
</body>
</html>
<script type="text/javascript">
    /*获取对应元素id*/
    var button=document.getElementById(\'点我\');
    var box=document.getElementById(\'box\');
    var a=1;
    // 写操作
    button.onclick=function(){
         box.innerHTML+=\'<img src="img\'+a+\'.jpg" alt=""/>\';
         // 变换图片地址为img2.jpg,以此类推
         a+=1;
         // 当a>2时,图片地址回到原点--重复两张图片
         if(a>2){
            a=1;
         }
    };         
</script>

解释一下代码,一如既往,先获取input元素和div元素id,进行写操作赋予了img标签,可以看到img标签的属性值src是通过a来控制在img1.jpg和img2.jpg(我只有这两张同级别的图),接着随a自加1,图片地址以此类推,当a>2时,a=1-->又回到img1.jpg图片了

看下初始效果:

 

这时候没有进行点击,也就是没有进行写操作,连右边控制台的div里也是空的
点击第一次的效果:

 

写入了img1.jpg图片,注意右边的控制台中div里是不是增加了<img src="img1.jpg" alt="">这行代码

 当我们执行完写入操作

 box.innerHTML+=\'<img src="img\'+a+\'.jpg" alt=""/>\';
后面的a自加1
 a+=1;
图片地址变换成img2.jpg
这时候点击第二次,效果:

我要表达的在这:写操作要注意两点,一个是会清空原先的所有内容,第二点就是这个例子中,可以写入元素标签,你们注意到我在上面写的img样式吗,原因在此,事先控制好图片大小

 

喜欢的小可爱双击哦!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerHTML属性</title>
    <style type="text/css">
    #div1{
        width: 200px;
        height: 200px;
        border: 1px dashed gray;
    }
    </style>
</head>
<body>
    <span id="spanid">兰叶春葳蕤,桂华秋皎洁</span>
    <div id="div1"></div>
    <input type="button" value="可坏!" onclick="innerhtml();">
    <!-- 
    innerHTML属性
    这个属性不是dom的组成部分,但是大多数浏览器都兼容
        *第一个作用:获取文本内容
         **第二个作用:向标签里面设置内容,可以是HTML代码
     -->
    <script type="text/javascript">
    function innerhtml(){
    //获取文本内容
    var span = document.getElementById("spanid");
    alert(span.innerHTML);
    //向div中添加表格
    div1.innerHTML="<table border=1px><tr><td>明月出天山</td><td>苍茫云海间</td></tr><tr><td>长风几万里</td><td>吹度玉门关</td></tr>"
    }
    </script>
</body>
</html>

点击前:

点击后:

 

 

 

以上是关于JavaScript之innerHTML的主要内容,如果未能解决你的问题,请参考以下文章

48个值得掌握的JavaScript代码片段(上)

Thymeleaf - 如何交互和重新加载 Javascript?

Javascript:: 从 innerHTML 到 appendChild

JavaScript:如何在没有 innerHTML 的情况下替换元素内的代码

JavaScript--更新DOM

jquery基本操作