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="测试"哈哈'testInnerText'" onclick="testInnerText()">
<input type="button" value='测试单引号和双引号问题' onclick='alert("我是\"张三,我是双引号\"我是单引号'哈哈")'>
<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>