点击div弹出innerHTML_div.innerhtml-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44723507/article/details/89388111

本文将介绍如何使用JavaScript，当点击一个div元素时，弹出该div的innerHTML内容。通过添加事件监听器和获取元素内容，我们可以创建交互式的网页元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>点击div弹出innerHTML</title>
    <style>
        .wrapper{
            width: 500px;
            height: auto;
            margin: 0 auto;
        }

        .wrapper>div{
            border: 1px #555 solid;
            margin-top: 15px;   
        }
        
    </style>
</head>

<body>
    <div class="wrapper" id="wrapper">
        <div class="d1">
            <p> &nbsp;&nbsp;近日，许志安出轨黄心颖事件引起热议。4月18日，郑秀文发文回应此事，
                表示这是婚姻中夫妻二人之间的一课，今天，肩上的重担仿佛轻了很多。只愿一切快平息，
                回归平静。婚姻当中除了彼此给予的幸福温暖，当中也深深包含了彼此的错误和彼此的原谅。
                她深信婚姻历练中经验和教训一定会帮助彼此重回正轨。同时，她也请求各大媒体不要
                再等候和追访她的父母。</p>
        </div>
        <div class="d2">
            <p>&nbsp;&nbsp;当地时间15日下午6点50分左右，法国巴黎圣母院突发火灾，
                标志性塔尖坍塌，玫瑰花窗被烧毁。大火给巴黎圣母院造成了“很可观的损失”，
                可能要花“数十年”才能彻底修复巴黎圣母院大教堂。持续14个小时后，巴黎圣
                母院大火已完全被扑灭，下面是网易新闻梳理的要点汇总和热点关注。</p>
        </div>
        <div class="d3">
            <p>&nbsp;&nbsp;在西安奔驰女车主维权一事引发关注后，多地现效仿现奔驰女车主坐引擎盖维权的现象。
                针对坐引擎盖维权现象频现，女车主家人陈先生（化名）向北青报记者表示，媒体关注
                后一直怕给大家做了错误的示范， 不想看到大家都去爬引擎盖，鼓励车主通过正规程
                序维权。“不能还没有走正规程序，就指望按闹分配。”</p>
        </div>
    </div>
    <script>
        var innerDiv = document.getElementById("wrapper").getElementsByTagName("div");
        for(var i = 0; i < innerDiv.length; i++){
            innerDiv[i].onclick = function(){
                alert(this.innerHTML);
            }
        }

    </script>
</body>

</html>