Question

我有一个表和一个按钮，当按下按钮时，它会在div中的表中添加一个新输入，当我在div中手动添加输入并测试它是否有效，但是当脚本添加它时走出桌子......为什么会这样？我该如何解决这个问题？

HTML：

..
<script> var x=0; </script>
...
       <table>
         <tr>
           <td>From:</td>
           <td><input type="text" name="from" /></td>
         </tr>
         <tr>
           <td>To (email):</td>
           <td><input type="text" name="to0" /></td>
           <td><input type='button' onclick='newMail()'  value='Add recipient'/> </td>
         </tr>

    <div id="add">
        <tr>
           <td>To (email):</td> <!-- this works -->
           <td><input type="text" name="to0" /></td>
        </tr>
    </div>

         <tr>
           <td align="center" colspan="2"><input type="submit" value="send"></td>
         </tr>
       </table>

JS：

 function newMail()
 {
    x=x+1;
    var input =
    "   <tr>"+
    "      <td>To (email):</td>"+
    "      <td><input type='text' name='to"+x+"' /></td>"+
    "    </tr>";
    document.getElementById("add").innerHTML += input;
 }

该函数可以正常工作并添加输入和所有内容，但是它超出了表格，而我手动添加的div中的那个工作正常并且正常显示。

Answer 1

试试这个：https://jsfiddle.net/0dh52827/

JAVASCRIPT

$( document ).ready(function() {
        $("#add_recipient").click( function() {
        x = x + 1;
        console.log(x);
      var input =
        "   <tr>" +
        "      <td>To (email):</td>" +
        "      <td><input type='text' name='to" + x + "' /></td>" +
        "    </tr>";
      $("#add").prepend(input);
    });
});

HTML：

<script>
  var x = 0;
</script>
<table id="add">
  <tr>
    <td>From:</td>
    <td>
      <input type="text" name="from" />
    </td>
  </tr>
  <tr>
    <td>To (email):</td>
    <td>
      <input type="text" name="to0" />
    </td>
  </tr>

  <tr>
    <td>To (email):</td>
    <!-- this works -->
    <td>
      <input type="text" name="to0" />
    </td>
  </tr>

  <tr>
    <td align="left">
      <input type="submit" value="send">
    </td>
    <td align="right">
      <input id="add_recipient" type='button' value='Add recipient' />
    </td>
  </tr>

JQUERY Prepend专为此类设计。

Answer 2

请检查

function newMail() {
  x = x + 1;
  var input =
    "   <tr>" +
    "      <td>To (email):</td>" +
    "      <td><input type='text' name='to" + x + "' /></td>" +
    "    </tr>";
  document.getElementById("add").innerHTML += input;
}

<script>
  var x = 0;
</script>
<table>
  <tr>
    <td>From:</td>
    <td>
      <input type="text" name="from" />
    </td>
  </tr>
  <tr>
    <td>To (email):</td>
    <td>
      <input type="text" name="to0" />
    </td>
  </tr>

  <tr>
    <td>To (email):</td>
    <!-- this works -->
    <td>
      <input type="text" name="to0" />
    </td>
  </tr>
  <tbody id="add"></tbody>

  <tr>
    <td align="left">
      <input type="submit" value="send">
    </td>
    <td align="right">
      <input type='button' onclick='newMail()' value='Add recipient' />
    </td>
  </tr>

Answer 3

id =＆＃34的元素;添加＆＃34;是<div>中的<table>（未正确放置但可能在某些浏览器中有效）。向其添加代码至少有一个未定义的行为。

您应该删除<div>代码，并为<tr>代码添加id =＆＃34;添加＆＃34;属性然后使用document.getElementById("add").appendChild()方法添加新的html节点。要创建此节点，请不要使用MDN

中描述的document.createElement()文本。

javascript .innerHTML（）在div之外插入

3 个答案: