文档载入结束后还能使用innerHTML回更改元素内容吗

文档载入结束后还能使用innerHTML来更改元素内容吗？
具体情况下是这样的：

<html>

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<title>遍历对象属性</title>

		<script type="text/javascript">

			var count = 0;

			function showNavigator(){

				alert(count += 1);

				//以前var browser = this.navigator，使用原写法将showNavigator函数赋给onclick函数调用是不成功的。

				//可能是因为click事件发生时，this所指代的是button对象。

				var browser = window.navigator;

				var text = "";

				for(p in browser){

					//for in 循环中，p即为browser对象中的一个属性名，其值就是属性名的值，所以输出p是属性名字符串。

					//如何获取p代表的属性名的值，使用browser[p]即可，不可以使用browser.p。

					if(typeof browser[p] === "function") continue;

					text += p;

					text += " : ";

					text += browser[p];

					text += "</br>";

				}

				document.body.innerHTML += text;

			}

		</script>

	</head>

	<body>

		<input type="button" id="showProperties" name="mybutton" value="显示浏览器属性">

		<script>

			document.getElementById("showProperties").onclick = showNavigator;

		</script>  

	</body>

</html>

button的onclick函数只有第一次生效，但是如果将document.body.innerHTML += text;注释掉就可以调用多次，所以我怀疑是不是在文档载入结束后就不能使用以上的用法，否则会出错。
------解决思路----------------------
document.body.innerHTML += text; 这样会重新创建页面上的所有元素，导致之前用js绑定的事件就没有了

文档载入结束后还能使用innerHTML回更改元素内容吗

相关推荐