JavaScript 读写文本

■知识点

    innerText和outerText也是IE的私有属性，但是没有被HTML5纳入规范。

    innerText在指定元素中插入文本内容，如果文本中包含HTML字符串，将被编码显示。

    浏览器支持状态：IE4+、Safari 3+、Chrome和Opera 8+。Firefox提供/ textContent属性支持相同的功能。支持 textContent 属性的浏览器还有 IE9+、Safari 3+、Opera 10+和 Chrome。

    outerText与innerText功能类似，但是它能够覆盖原有的元素。

■实例设计

下面的示例使用outerText、innerText、outerHTML和innerHTML这4种属性为列表结构中不同列表项插入文本。

<hl>单击回答问题</hl>

<ul>

    <li> 你好 </li>

    <li>你叫什么？ </li>

    <li>你干什么？ </li>

    <li>你喜欢 JS 吗？ </li>

</ul>

<script>

var ul = document.getElementsByTagName(nuln)[0];  ■实例设计

下面的示例使用outerText、innerText、outerHTML和innerHTML这4种属性为列表结构中3、同列表 项插入文本，演示效果如图25.4所示。

<hl>单击回答问题</hl>

<ul>

<li> 你好 </li>

<li>你叫什么？ </li>

<li>你干什么？ </li>

<1;1>你喜欢 JS 吗？ </li>

</ul>

<script>

var ul = document.getElementsByTagName("ul")[0];    //获取列表结构

var lis = ul.getElementsByTagName("li");                       //获取列表结构的所有列表项

lis[0].onclick = function(){                                          //为第1个列表项绑定事件处理函数

    this.innerText ="谢谢";                                           //替换文本

}

lis [1] .onclick = function(){                                        //为第2个列表项绑定事件处理函数

    this.innerHTML = "<h2>我是一名初学者</h2>";   //替换HTML文本

}

lis[2].onclick = function () {                                        //为第3个列表项绑定事件处理函数

    this.outerText = "我是学生";                                   //覆盖列表项标签及其包含内容

}

lis[3].onclick = function(){                                          //为第4个列表项绑定事件处理函数

    this. outerHTML = "<h2> 当然喜欢</h2>";           //覆盖列表项标签及其包含内容

}

</script>