javascript - 附加“输入”时的奇怪 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>

这适用于所有其他类型的字符串，但不适用于 "input" ，因此它适用于 "button","div","input27",..

为什么会这样？