JS动态创建元素的奇怪问题待解决

昨天用js动态创建元素时出现了一个奇怪的问题，看看谁能帮忙解决一下。

html代码：

<HTML>
<HEAD>
<TITLE>动态创建元素 </TITLE>
<script type="text/javascript">
	function btnClick(){
		var div=document.getElementById("m");
		var btn = document.createElement("input");
		btn.type="button";
		btn.value="New Button";
		div.appendChild(btn);
	}
</script>
</HEAD>
<BODY>
11111111
<div id="m"></div>
22222222
<input type="button" value="Create" onclick="btnClick()" />
33333333
</BODY>
</HTML>

当HTMl里的div为<div id="m"></div>时运行结果：

当HTMl里的div为<div id="m"/> 时运行结果：

为什么出现这种情况？谁来帮忙解决一下.