innerHTML和innerText的用法(动态改变网页内容)

时间:2021-08-25 14:37:19

最近在学习JavaScript,觉得innerHTML和innerText太有用了,利用它们,我们可以试自己的网页实现动态化。不过在使用的过程中,千万要注意它们的大小写,因为错一点您就得不到预期的效果了。这是全新的方法,当您掌握它以后将可随心所欲的设计动态内容了,不可错过哦!


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  

<html>  
    <head>  
    <meta http-equiv="Content-Type        content="text/html;charset=UTF-8">  
   <title>innerText和innerHTML用法实例</title>  
    <script language="JavaScript" type="text/javascript">   
        function changeText() {   
            DT.innerText="我很好!";   
        }//function   
  
        function changeHtml() {   
            DH.innerHTML="<i><u>我姓肖!</u></i>";   
        }//function   
       function back() {   
            DT.innerText="您好吗?";   
            DH.innerHTML="您姓什么?";   
        }   
    </script>  
   </head>  
    <body>  
       <p><font color="gray">请点击下边的文字……</font>   
        <ul>   
       <li id="DT" onclick="changeText()">您好吗? </li>   
        <li id="DH" onclick="changeHtml()">您姓什么? </li>   
        <li onclick="back()">恢复原样! </li>   
        </ul>  
   </body>  
</html>