Question

我有一个html文件，它有两个带有各种嵌套元素的div元素。

<div id="App1" class="app">
    <p class="header">Application 1 : User Registration</p>
    <form>
      <label>User Name</label>
      <input type="text" name="firstname" placeholder="Your name..">
      <div>
        <input type="radio" name="Gender"> Male
        <input type="radio" name="Gender"> Female
      </div>
      <label>Address</label>
      <textarea></textarea>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </div>
  <div id="App2" class="app">
    <p class="header">Application 2 : Global car search</p>
    <form>
      <table>
        <tr>
          <td>
            Make Name
          </td>
          <td>
            <input type="text" name="firstname" placeholder="Car make company..">
          </td>
        </tr>
        <tr>
          <td>
            Car Type
          </td>
          <td>
            <input type="radio" name="Type"> Old
            <input type="radio" name="Type"> New
          </td>
        </tr>
        <tr>
          <td>
            <input type="submit" value="Search">
          </td>
        </tr>
      </table>
    </form>
  </div>

现在我使用remove()方法从文档中删除#App1

var app1 = document.querySelector('#App1');
app1.remove();
//how to add back ???

现在将这个片段再次添加到文档中的最佳方法是什么？

Plunker example

请建议，可能的解决方案。

Answer 1

引用chunked_*()

的父级

app1

Answer 2

您可以使用.cloneNode(true)和.insertBefore()

var app1 = document.querySelector("#App1");
var clone = app1.cloneNode(true);
app1.remove();
var sibling = document.querySelector("#App2");
setTimeout(function() {
  sibling.parentElement.insertBefore(clone, sibling);
}, 3000);

.app {
  float: left;
  overflow: auto;
  margin: 10px;
  border: 2px dashed #ccc;
  min-height: 400px;
  min-width: 45%;
  width: inherit;
  padding: 2px;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div id="App1" class="app">
    <p class="header">Application 1 : User Registration</p>
    <form>
      <label>User Name</label>
      <input type="text" name="firstname" placeholder="Your name..">
      <div>
        <input type="radio" name="Gender"> Male
        <input type="radio" name="Gender"> Female
      </div>
      <label>Address</label>
      <textarea></textarea>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </div>
  <div id="App2" class="app">
    <p class="header">Application 2 : Global car search</p>
    <form>
      <table>
        <tr>
          <td>
            Make Name
          </td>
          <td>
            <input type="text" name="firstname" placeholder="Car make company..">
          </td>
        </tr>
        <tr>
          <td>
            Car Type
          </td>
          <td>
            <input type="radio" name="Type"> Old
            <input type="radio" name="Type"> New
          </td>
        </tr>
        <tr>
          <td>
            <input type="submit" value="Search">
          </td>
        </tr>
      </table>
    </form>
  </div>
</body>

</html>

plnkr https://plnkr.co/edit/2vjQHeGGZYWxJENFaZuA?p=preview

如何使用javascript将DOM模块的片段添加到现有文档中

2 个答案: