javascript.innerHTML()在div外部插入

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="add"的元素是<table>中的<div>（未正确放置，但可能在某些浏览器中可用）。向其中添加代码至少有一个未定义的行为。

您应该删除<div>标记，并为<tr>标记赋予id="add"属性，然后使用document.getElementById("add").appendChild()方法添加一个新的html节点。要创建此节点，不要使用文本，而是使用document.createElement()，如MDN 中所述