innerText与innerHTML区别

        window.onload = function () {
            document.getElementById('btn1').onclick = function () {
            //显示的是层中的文本内容
                alert(document.getElementById('dv').innerText);
            };
            document.getElementById('btn2').onclick = function () {
            //显示的是层中标签和文本内容
                alert(document.getElementById('dv').innerHTML);
            };
            //=======================================
            document.getElementById('btn3').onclick = function () {
            //设置innerText--标签还是文本都都一起添加到层中了
                document.getElementById('dv').innerText = '<font color="yellow">设置的</font>';
            };
            document.getElementById('btn4').onclick = function () {
            //把效果显示到层中
                document.getElementById('dv').innerHTML = '<font color="yellow">舍得</font>';
            };
        };

    <input type="button" name="name" value="显示innerText" id="btn1" />
    <input type="button" name="name" value="显示innerHTML" id="btn2" />
    <input type="button" name="name" value="设置innerText" id="btn3" />
    <input type="button" name="name" value="设置innerHTML" id="btn4" />

   
    <div id="dv" style="width:600px; height:200px; border:1px solid red;">
        <span color="red" face="全新硬笔行书简" size="7">只要功夫深水棒磨成针！</span>
</div>