innerHTML的作用及用法。

最新推荐文章于 2025-07-20 11:31:11 发布

原创最新推荐文章于 2025-07-20 11:31:11 发布 · 1w 阅读

37 ·

CC 4.0 BY-SA版权

文章标签：

#innerHTML

对innerHTML的用法有些模糊，今天来总结一下：
1、innerHTML有两个作用：（1）获取对象的内容；
（2）向对象插入内容；

例：

这是内容

，由于id是唯一的，我们可以不获取id。通过 a.innerHTML 来获取id为a的对象的内嵌内容；

也可以通过b.innerHTML = "这是被插入的内容"；在id为b的对象中插入内容。

例子1（获取对象的内容）：

<body>
     <p id="test">内容</p>
     <input type="button" "getInnerHTML()" value="点击" />
</body>
<script type="text/javascript">
     function getInnerHTML(){
         alert(test.innerHTML); //将获取的内容弹出！
     } 
</script>

例子2（向对象插入内容）：

<body>
    <p id="test"></p>
    <input type="button" "setInnerHTML()" value="点击" />
</body>
<script type="text/javascript">
    function setInnerHTML(){
        test.innerHTML = "这是插入的内容！"; //点击按钮将内容插入到p标签内！
    }
    </script>