JavaScript Передача получения и передачи входной информации 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>

Answer 1

al это строка и text это узел. Аргумент appendChild должен быть узлом.

Выводить al прямо в div сделайте что-то вроде этого:

document.getElementById("outer").textContent=al;

Или когда вы хотите HTML-код в al работать:

document.getElementById("outer").innerHTML=al;