2016-04-16 153 views
1

我遇到了一些我認爲在JavaScript中很奇怪的東西。我正在構建一種形式,其思想是提供按需添加表格行和字段的能力。您可以想象我開始嘗試使用createElement,appendChild等。JavaScript通過檢索並傳遞輸入信息nodeValue vs createTextNode

爲什麼當我嘗試從輸入字段傳遞一個值時,它不能直接附加並輸出到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> 
+0

你能提供的jsfiddle證明問題,告訴我們您使用的瀏覽器是什麼?我無法複製你描述的'pat.appendChild(al)不是對象'的錯誤。 – Mahout

回答

0

al是一個字符串和text是一個節點。 appendChild的參數必須是節點。

要輸出al直接進入一個div做這樣的事情:

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

,或者您希望在al HTML代碼的工作:

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