JavaScript入力情報の取得と渡しnodeValueとcreateTextNodeの比較

Question

JavaScriptで奇妙なことが起こっています。私は、必要に応じてテーブルの行とフィールドを追加する機能を提供するという考え方を構築しています。あなたが想像できるように私はcreateElement、appendChildの実験を開始した、など

私は入力フィールドから値を渡すしようとすると、なぜそれがdivタグに直接出力追加することはできませんか？ただし、検索された値を最初にcreateTextNodeまで渡してから出力すると効果があります。

コンソールは、連結pat.appendChild（Al）を

しかしpat.appendChild(text)が正常に動作し 対象ではないと言っていますか？

Answer 1

<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> 

al文字列であり、textノードです。引数appendChildはノードでなければなりません。

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

それとも、仕事にalにHTMLコードをしたい：直接のdivに出力alへ

はこのような何かを

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