javascript中的innerHTML和innerText的知识点

javascript中的innerHTML和innerText的知识点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript中的innerHTML和innerText的知识点,雪豹软件工作室,javascript</title>
<link rel="stylesheet" type="text/css" href="mark.css">
<link rel="stylesheet" type="text/css" href="body.css">
</head>
<script type="text/javascript">
	/*使用innerHTML也可以动态(在代码运行时)的给html添加删除节点内容*/
	
	/*
	innerHTML和innerText的区别
	innerHTML：会解析运行其中的html代码
	innerText：不会解析运行其中的html代码,整个内容原样，原原本本的显示
	innerHTML与createElement,appendChild这些dom方式编程比较，优点是：简单，代码较少
	缺点是：没有后者灵活，功能强大。
	最好是2种方式配合使用
	*/
	
	//向div中插入图片
	function insertImg() {
		var divNode = document.getElementById("myDiv");
		var imgNode = '<img src="img/cry6.gif" title="哈哈，测试图片">';
		//直接写html代码
		//divNode.innerHTML = imgNode;
		divNode.innerHTML = divNode.innerHTML + imgNode;//在原来的内容后面追加内容
	}

	//向div中插入form表单(innerHTML会覆盖掉原来的内容,想保留原来的内容的话，可以采用追加的方式)
	function insertForm() {
		var divNode = document.getElementById("myDiv");
		//var formNode = '<form action=""><input name="message"><input type="button" value="留言"></form>';
		var formNode = '<form>' + '<input name="message">'
				+ '<input type="button" value="留言">' + '</form>';
		//divNode.innerHTML = formNode;
		divNode.innerHTML = divNode.innerHTML + formNode;//在原来的内容后面追加内容
	}
	
	//删除div中的内容
	function deleteMessage(){
		var divNode = document.getElementById("myDiv");
		divNode.innerHTML = "";
	}
	
	//测试innerText
	function testInnerText(){
		//alert("this = " + this);
		var divNode = document.getElementById("myDiv");
		var formNode = '<form>' + '<input name="message">'
		+ '<input type="button" value="留言">' + '</form>';
		//divNode.innerText = divNode.innerText + formNode;
		divNode.innerText = formNode + "测试下单引号'双引号\"的问题" + "我是单引号\'，如果最外面是双引号的话，里面的单引号加不加斜杠都可以";
	}
	
	function testInnerText2(){
		var divNode = document.getElementById("myDiv");
		divNode.innerHTML = "<font color='red'>哈哈<br>呵呵</font><br><br><hr>";
		divNode.innerText += "江西省赣州市于都县";
		//divNode.innerHTML += "江西省赣州市于都县";
	}
	
</script>
<body>
	<input type="button" value="测试&quot;哈哈'testInnerText'" onclick="testInnerText()">
	<input type="button" value='测试单引号和双引号问题' onclick='alert("我是\"张三,我是双引号\"我是单引号&apos;哈哈")'>
	<input type="button" value="插入form表单" onclick="insertForm()">
	<input type="button" value="插入图片" onclick="insertImg()">
	<input type="button" value="删除" onclick="deleteMessage()">
	<input type="button" value="测试innerText是否会保留<br>标签(答案是会保留下<br>标签)" onclick="testInnerText2()">
	<hr>
	<div id="myDiv">这是div中原来的内容！</div>
</body>
</html>
javascript中的innerHTML和innerText的知识点

猜你喜欢
