JavaScript Прохождение поиска и передачи информации ввода nodeValue vs createTextNode

Question

Я столкнулся с чем-то, что, по моему мнению, странно в JavaScript. Я создаю форму, идея которой заключается в том, чтобы предоставить возможность добавлять строки и поля таблицы по требованию. Как вы могли себе представить, я начал экспериментировать с createElement, appendChild и т.д.

Почему когда я пытаюсь передать значение из поля ввода не может быть добавлен непосредственно и выход к div тега? Однако при передаче полученного значения сначала через createTextNode, а затем его вывод будет выполнен.

Консоль говорит, что конкатенация pat.appendChild (аль) не является объектом

но 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;