08JavaScript中innerText和innerHTML（FF：textContent） 

几乎所有DOM元素都有innerText、innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和
HTML源代码，这两个属性是可读可写的。//FF不支持innerText,在FF下用textContent属性。
也可以用innerHTML设置普通文本。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        onload = function () {
        
            //设置innerText的值，只有IE可以用
            //document.getElementById('btn1').onclick = function () {
            //    document.getElementById('dv').innerText = '<font face="方正姚体" color="green">死后必定长眠，生前何必贪睡</font>';
            //};
            //设置innerHTML的值
            document.getElementById('btn2').onclick = function () {
                document.getElementById('dv').innerHTML = '<font face="方正姚体" color="green">死后必定长眠，生前何必贪睡</font>';
            };
           
            //显示innerHTML的值
            document.getElementById('btn4').onclick = function () {
                alert(document.getElementById('dv').innerHTML);
            };
            //设置innerText的值，火狐和IE兼容
           
              document.getElementById('btn5').onclick = function () {
                 
                  if (typeof (document.getElementById('dv').innerText) == 'string') {
                      //IE
                      document.getElementById('dv').innerText = '<font face="方正姚体" color="green">死后必定长眠，生前何必贪睡</font>';
                  }else {
                      //火狐
                      document.getElementById('dv').textContent = '<font face="方正姚体" color="green">死后必定长眠，生前何必贪睡</font>';
                  };
              };


            //显示innerText的值
              document.getElementById('btn3').onclick = function () {
                  if (typeof (document.getElementById('dv').innerText) == 'string') {
                      //IE
                      alert(document.getElementById('dv').innerText);
                  } else {
                      //火狐
                      alert(document.getElementById('dv').textContent);
                  };
              };
            

        };
    </script>

</head>
<body>
    <input id="btn1" type="button" name="name" value="设置innerText的值，只有IE可以用" />
    <input id="btn2" type="button" name="name" value="设置innerHTML的值" />
    <input id="btn3" type="button" name="name" value="显示innerText的值" />
    <input id="btn4" type="button" name="name" value="显示innerHTML的值" />
    <input id="btn5" type="button" name="name" value="设置innerText的值，火狐和IE兼容" />
    <div id="dv" style="height:300px;width:400px;border:2px dashed red;margin:0px auto;">
    </div>
</body>
</html>

　　

posted on 2016-01-07 16:04  努力的活着_在人间  阅读(174)  评论(0)    收藏  举报

导航