JavaScript 替换HTML字符串

■知识点

    outerHTML也是IE的私有属性，后来被HTML5规范，与innerHTML的功能相同，但是它会包含元素自身。浏览器支持状态：IE4+、Firefox 8+、Safari 4+、Chrome 和Opera 8+。

■实例设计

    下面的示例演不了 outerHTML与innerHTML属性的不同效果。分别为列表结构中不同列表项定义—个鼠标单击事件，在事件处理函数中分别使用outerHTML和innerHTML属性改变原列表项的HTML标记，同时会发现outerHTML是使用<h2>替换<li>，而innerHTML是把<h2>插入到<li>中。

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

<ul>

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

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

</ul>

<script>

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

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

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

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

}

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

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

}

</script>