JavaScript Übergeben von Abrufen und Übergeben von Eingabeinfo nodeValue vs createTextNode

Question

Ich bin auf etwas gestoßen, von dem ich glaube, dass es in JavaScript seltsam ist. Ich baue ein Formular auf, das die Möglichkeit bietet, Tabellenzeilen und -felder bei Bedarf hinzuzufügen. Wie man sich vorstellen kann begann ich mit createElement experimentieren, appendChild usw.

Warum wenn ich versuche, einen Wert aus einem Eingabefeld kann es nicht direkt angehängt werden und div Tag an einen Ausgang weitergeben? Wenn Sie jedoch den abgerufenen Wert zuerst über createTextNode übergeben und dann ausgeben, funktioniert er.

Die Konsole sagt, dass die Verkettung pat.appendChild (al) kein Objekt

aber pat.appendChild(text) funktioniert gut?

<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 ist eine Zeichenkette und text ist ein Knoten. Das Argument appendChild muss ein Knoten sein.

Zur Ausgabe al direkt in ein div etwas tun, wie folgt aus:

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

Oder, wenn Sie möchten, den HTML-Code in al arbeiten:

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