JavaScript中DOM-innerHTML详解

2024-12-01 来源：个人技术集锦

innerHTML在JS是双向功能：获取对象的内容或向对象插入内容；
如：<div id="ABC">这是内容</div>
我们可以通过 document.getElementById(“ABC”).innerHTML 来获取id为aa的对象的内嵌内容；
也可以对某对象插入内容，如 document.getElementById(“ABC”).innerHTML=’这是被插入的内容’;
这样就能向id为abc的对象插入内容。
实例：
1.获取段落p的 innerHTML（html内容）

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <script type="text/javascript">
            function getInnerHTML(){
                alert(document.getElementById("test").innerHTML);
            }
        </script>
    </head>
    <body>
        <p id="test"><font color="#000">嗨豆壳 www.hi-docs.com</font></p>
        <input type="button" onclick="getInnerHTML()" value="点击" />
    </body>
 </html>

2.设置段落p的 innerHTML（html内容）

<html>
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
            <script type="text/javascript">
            function setInnerHTML(){
                document.getElementById("test").innerHTML = "<strong>设置标签的html内容</strong>";
            }
            </script>
            </head>
        <body>
            <p id="test"><font color="#000">嗨豆壳 www.hi-docs.com</font></p>
            <input type="button" onclick="setInnerHTML()" value="点击" />
        </body>
  </html>

innerHTML修改元素内容实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #div1{
            height: 200px;
            width: 200px;
            background: #E8E1E1;
            margin-top: 10px;
        }
    </style>
    <script>
        window.onload=function(){
            var div0=document.getElementById("div1");
            var btn0=document.getElementById("btn");
            var txt0=document.getElementById("txt");

            btn0.onclick=function () {
                div0.innerHTML=txt0.value;
            };

            }

    </script>
</head>
<body>
<input type="text" id="txt">
<input type="button" value="提交" id="btn">
<div id="div1"><p>innerHTML修改元素内容</p></div>
</body>
</html>

另一个例子：
上一篇简单提到了innerHTML，那么现在我就通过一个简单的模仿一下发消息的原理例子。接下来简单布局一下：

<div id="box"></div>
 <span id="span1">张三：</span>
 <input type="text" id="text1"/>
<input id="Btn" type="button" value="按钮" name=""/>

css也简单写一下：

 <style>
        #box{width:250px;height:300px;border:1px solid #e5e5e5;background:#f1f1f1;}
    </style>

布局展示如下：

下面就是js了，看看如何运用innerHTML了：

<script>
         window.onload= function(){
          var oBox=document.getElementById("box");
          var oSpan=document.getElementById("span1");
          var oText=document.getElementById("text1");
          var oBtn=document.getElementById("Btn");
          oBtn.onclick = function(){
              oBox.innerHTML =oBox.innerHTML  + oSpan.innerHTML +  oText.value + "<br/>";
              //oBox.innerHTML += oSpan.innerHTML + oText.value +  "<br/>";这是简便的写法，在js中 a=a+b ,那么也等同于 a+=b
             oText.value=""
         };
     }
 </script>

实现效果如下：

显示全文

全部栏目

JavaScript中DOM-innerHTML详解