js动态文本

<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>

猜你喜欢