JavaScript Passing récupérer et passer des informations d'entrée nodeValue vs createTextNode

Question

J'ai rencontré quelque chose que je crois étrange en JavaScript. Je construis un formulaire dont l'idée est de fournir la possibilité d'ajouter des lignes de table et des champs à la demande. Comme vous pouvez l'imaginer, je commencé à expérimenter avec createElement, appendChild, etc.

Pourquoi lorsque je tente de transmettre une valeur à partir d'un champ de saisie, il ne peut pas être ajouté directement et sortie à une balise div? Cependant, lors du passage de la valeur récupérée d'abord à createTextNode, puis en sortie, cela fonctionne.

La console dit que la concaténation pat.appendChild (al) n'est pas un objet

mais pat.appendChild(text) fonctionne bien?

<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 est une chaîne et text est un noeud. L'argument de appendChild doit être un nœud.

Pour sortie al directement dans un div faire quelque chose comme ceci:

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

Ou quand vous voulez code HTML dans al au travail:

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