Question

**我见过类似的问题，但他们还没有给我一个近距离的解决方案。添加新div IoInterface，点击按钮时，所有表格和字段都会显示此<div class="container" id="section"style="border: 1px solid grey;">。我试图通过以下代码附加它。

div

任何人都可以帮我解决这个问题。提前谢谢。

Answer 1

点击红色方块内）

function run() {

    var div = document.createElement("div"); //create new div
    div.addEventListener("click", run); //bind click to new div
    this.append(div); //append the new div to clicked div
    this.removeEventListener("click", run); //remove the original click event

}
document.getElementById("section").addEventListener("click", run);

div{
border: 4px solid red;
padding: 4px;
}

<button id="section">run</button>

Answer 2

如果我理解正确，您希望在按钮单击时克隆整个部分（包括其子部分）并将其附加到原始部分下方。

您可以使用cloneNode(true)执行此操作 - 但请注意，它会复制任何字段名称（例如输入上的字段名称）。

container.appendChild(sourceNode.cloneNode(true))

＆＃13;

document.getElementById("newsectionbtn").onclick = function() {
  var container = document.getElementById("container");
  var section = document.getElementById("mainsection");
  container.appendChild(section.cloneNode(true));
}

＆＃13;

section { border:1px solid #ddd; }

＆＃13;

<div id="container">
  <button id="newsectionbtn">+New Section</button>
  <section id="mainsection">
    <table>
      <thead>
        <tr>
        <th>Field 1</th>
        <th>Field 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="text" name="f1" /></td>
          <td><input type="text" name="f2" /></td>
        </tr>
      </tbody>
    </table>
  </section>
</div>

＆＃13;

按钮点击添加新div

2 个答案: