位置:首页 > 软件操作教程 > 编程开发 > JavaScript > 问题详情

JavaScript 替换HTML字符串

提问人:刘团圆发布时间:2020-11-26

■知识点

    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>

继续查找其他问题的答案?

相关视频回答
回复(0)
返回顶部