在html文档中,如果要动态获取/设置div、p、span及input中内容,我们该怎么来操作呢?具体可以分成两类来实现,第一种对于文本框要使用value获取和设置它的内容;而对于div、p、span则要通过innerHTML进行设置。

一、前台html界面

js获取/设置网页内容的两种方式value/innerHTML-LMLPHP

二、后台代码

<body>
        <input type="text" name="" id="username" />
        <span id="computer">我是电脑</span>
        <div class="a">
            <p>I am student</p>
        </div>
        <button onclick="test();">测试</button>
        <span id="result" style="color: red;"></span>
        
        <script type="text/javascript">
                function test(){
                    //1.获取文本框的值,设置到span中
                    /* var msg=document.getElementById("username").value;
                    document.getElementById("result").innerHTML=msg; */
                    
                    //2.获取span的值,设置到span中
                    var computer=document.getElementById('computer').innerHTML;
                    document.getElementById("result").innerHTML=computer;
                    
                    //3.获取div.p中的内容,设置到span中
                    var student=document.getElementsByTagName("p")[0].innerHTML;//0指的是获取的第一个p标签(getElementsByTagName获取的是一个数组)
                    document.getElementById("result").innerHTML=student;
                }
        </script>

03-08 09:06