Question

我想将ID为 hello 的div的多个副本附加到ID为 container 的div中。我该如何使用JavaScript？


<div id="container">

</div>

<div id="hello">
   <p>Hello</p>
</div>

Answer 1

使用cloneNode和appendChild。

由于id在文档中应该是唯一的，所以我改用hello类。

function makeCopy() {
  const target = document.getElementById("container");
  const source = document.querySelector(".hello");
  const clone = source.cloneNode(true);
  target.appendChild(clone);
}

.hello {
  padding: 3px;
  margin: 3px;
  border: 1px dotted orange;
}

<div id="container">
  This is the container.
</div>

<button onclick="makeCopy()">Add a clone of hello above</button>


<div class="hello">
  <p>Hello</p>
</div>

Answer 2

https://www.w3schools.com/jsref/met_node_appendchild.asp

检查一下，它将解决您的问题，但是使用标记的类而不是ID。 ID是唯一的，一个类用于多个元素。

您可以像这样在CSS中调用类

.className {
  /*CODE*/
}

Answer 3

您可以使用append（）方法：

$(document).on('click', function(){
   $('#container').append( $('#hello') ); 
});

如何将现有的html元素附加到另一个元素？

3 个答案: