版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/cheng_cuo_tuo/article/details/86646640
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
li{
cursor : pointer;}
</style>
<script>
/*
innerHTML、innerText、outerHTML、outerText这些属性虽然不符合标准,但是innerHTML被大部分浏览器支持,
innerText、outerText、outerHTML只适应与IE和Opera浏览器。
innerHTML:在指定元素中插入包含HTML标签的内容。HTML结构被插入到文档中依然有效。它是可读可写的。
innerText:在指定元素中插入文本的内容。文本中包含的HTML标签被编码显示,所插入的HTML标签仅作为字符串来显示。
outerHTML、outerText和innerHTML、innerText方法功能类似,但是它能够覆盖原来指定的元素。
通过查看网页的元素属性可以看出差别。
*/
window.onload = function(){
var ul = document.getElementsByTagName("ul")[0];
var list = ul.getElementsByTagName("li");
list[0].onclick = function(){
this.innerText = "谢谢";
}
list[1].onclick = function(){
this.innerHTML = "<h2>我是一名初学者</h2>";
}
list[2].onclick = function(){
this.outerText = "我是学生";
}
list[3].onclick = function() {
this.outerHTML = "<h2>当然喜欢</h2>";
}
}
</script>
</head>
<body>
<h1>单击回答问题</h1>
<ul>
<li>你好?</li>
<li>你叫什么?</li>
<li>你干什么?</li>
<li>你喜欢JS吗?</li>
</ul>
</body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<p>段落<b>文本</b></p>
<script>
/*
如果元素只包含文本,那么innerText和innerHTML属性将返回相同的字符串值,但是如果元素包含其他标签和文本,则innerText将、
只返回文本字符串,而innerHTML将返回所有标签和文本的HTML代码。
*/
var p = document.getElementsByTagName("p")[0];
alert(p.innerText);//段落文本
alert(p.innerHTML);//段落<b>文本</b>
</script>
</body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<p>段落<b>文本</b></p>
<script>
var p = document.getElementsByTagName("p")[0];
p.innerText = p.innerText;
/*
可以通过innerText属性为自己进行赋值,则可以从指定的元素内删除所有的HTML标签。
达到的效果就是,上面段落中的<b>标签属性被取消。
*/
</script>
</body>