javascript - JavaScript Pass 入力情報の取得と受け渡し nodeValue vs createTextNode

Question

JavaScript で奇妙なことに遭遇しました。必要に応じてテーブルの行とフィールドを追加する機能を提供することを目的としたフォームを作成しています。createElementご想像のとおり、appendChild、 などの実験を始めました。

div入力フィールドから値を渡そうとすると、値を直接追加してタグに出力できないのはなぜですか? ただし、取得した値を最初に渡してcreateTextNodeから出力すると機能します。

コンソールは、連結 pat.appendChild(al) がオブジェクトではないことを示しています

しかし、pat.appendChild(text)うまく動作しますか？

<script type="text/javascript">

function appendTr (){

    var pat = document.createElement("p");
    /*var formValue = document.createTextNode("This works, but why doesn\'t the other one");
    p.appendChild(formValue);*/
    var al = document.getElementById("position").value;
    var text = document.createTextNode(al);
    pat.appendChild(text);
    document.getElementById("outer").appendChild(pat);
}

</script>
<form>
    <table id="job">
        <tr>
            <td><input id="y1" name="y1" type="text"></td>
            <td><input id="y2" name="y2" type="text"></td>
            <td><input id="position" name="position" type="text"></td>
            <td><input id="org" name="org" type="text"></td>
            <td><input class="button" id="addRow" type="button" value="+" onclick="appendTr()"></td>
            </tr>
    </table>

</form>
<div id="outer">Not</div>