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"/> 时运行结果：
 为什么出现这种情况？谁来帮忙解决一下.