javascript - テーブルのセルに入力jsを動的に追加します

Question

ユーザーが JavaScript で必要な数の新しい入力フィールドを挿入できる関数をコーディングしようとしています。これが私のコードです:

<SCRIPT language="javascript"> 
     function add() {       
        var element = document.createElement("input");      
        element.setAttribute("type", 'text');     
        element.setAttribute("value", 'text');     
        element.setAttribute("name", 'text');        
        var foo = document.getElementById("fooBar");      
        foo.appendChild(element);   
    } 
</SCRIPT>  

HTML 部分

<form>
  <input type="text" name="answer" autofocus="autofocus" ONBLUR="if(this.value!=''){this.form.submit()};" placeholder="Modify answer"/>
  <span id="fooBar">&nbsp;</span>   
  <input type="button" value="Add" onclick="add()"/>   
</form>

これはうまく機能していますが、この html 構造に入れるとうまくいきません:

 <table>
     <tr><td><form> <!--my html part -include the second form--> </form></td></tr>
 </table>

私はjsの専門家ではないので、その理由はよくわかりません..それは、私がtdタグにいるからですか、それともタグの中にあるからですかform。

誰かが私が望むものを達成するのを助けるか、別の解決策を持っているなら、本当に素晴らしいでしょう 乾杯