几乎所有DOM元素都有innerText,innertHTML属性(注意大小写),分别是元素标签内容
的文本表示形式和HTML源代码,这两个属性是可读可写的
innerHTML也可以取代createElement,属于简单,粗放型,后果自负的创建
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>测试(innerText和innerHTML)</title>
<script type="text/javascript">
function TestOutput() {
var myLink = document.getElementById("lnk");
alert('innerText-->' + myLink.innerText); //得到百度网站
alert('innerHTML-->' + myLink.innerHTML); //得到百<font color="red">度</font>网站
}
function EditInnerText() {
var myLink = document.getElementById("lnk");
myLink.innerText = "凤凰网";
}
function EditInnerHTML() {
var myLink = document.getElementById("lnk");
myLink.innerHTML = "<font color='blue'>凤凰网</font>";
}
function dynamicButtonClick() {
alert('我是动态创建的');
}
function CreateButton() {
var div = document.getElementById("divMain");
div.innerHTML = "<input type='button' value='单击我' onclick='dynamicButtonClick()' />";
}
</script>
</head>
<body>
<a href="http://www.baidu.com" id="lnk">百<font color="red">度</font>网站</a>
<input type ="button" value="测试" onclick="TestOutput()" />
<input type="button"" value="修改InnerText" onclick="EditInnerText()" />
<input type="button"" value="修改InnerHTML" onclick="EditInnerHTML()" />
<div id="divMain"></div>
<input type="button" value="动态添加按钮" onclick="CreateButton()" />
</body>
</html>