附加“输入”时出现奇怪的DOM行为

Question

在Javascript中向DOM添加元素就像这样

    var but =document.createElement('input');
    document.getElementById("Area").appendChild(but);

这会改变这个div

<div id="Area">
    </div>

进入这个div

 <div id="Area">
   <input>
        </div>

我希望将它转换为这个div

  <div id="Area">
       <input> </input>
            </div>

这适用于所有其他类型的字符串，但不适用于“输入”，因此它适用于“button”，“div”，“input27”，..

为什么会这样？