如何将多个 div 元素移动或复制到另一个 div 中？

Question

我想将一些 html 元素复制或移动到另一个 div 元素中。

由此：

<ul class='here'>
<li>text1</li>
<li>text2</li>
<li>text3</li>
</ul>

<ul class='there'>
</ul>

对此：

<ul class='here'>
<li>text1</li>
<li>text2</li>
<li>text3</li>
</ul>

<ul class='there'>
<li>text1</li>
<li>text2</li>
<li>text3</li>
</ul>

或对此：

<ul class='here'>
</ul>

<ul class='there'>
<li>text1</li>
<li>text2</li>
<li>text3</li>
</ul>

很高兴知道，提前致谢！

Answer 1

移动： destination.appendChild( element )

 const destination = document.querySelector('ul.there'); document.querySelectorAll('ul.here > li').forEach( elm => destination.appendChild(elm) );

 ul { width: 5em;height: 6em;border: 1px solid orange;display: inline-block;margin: 0 1em;padding-top: .5em;vertical-align: text-top;padding: 0;list-style: none; } ul:before { display: block;content: '_' attr(class);color: green;border-bottom: 1px solid orange;margin-bottom: .3em; } li { padding-left: 1em; }

 <ul class='here'> <li>text1</li> <li>text2</li> <li>text3</li> </ul> <ul class='there'> </ul>

复制： destination.appendChild( element.cloneNode(true) )

 const destination = document.querySelector('ul.there'); document.querySelectorAll('ul.here > li').forEach( elm => destination.appendChild(elm.cloneNode(true)) );

 ul { width: 5em;height: 6em;border: 1px solid orange;display: inline-block;margin: 0 1em;padding-top: .5em;vertical-align: text-top;padding: 0;list-style: none; } ul:before { display: block;content: '_' attr(class);color: green;border-bottom: 1px solid orange;margin-bottom: .3em; } li { padding-left: 1em; }

 <ul class='here'> <li>text1</li> <li>text2</li> <li>text3</li> </ul> <ul class='there'> </ul>

Answer 2

您可能想要使用 appendTo function（添加到元素的末尾）：

$("#here").appendTo("#there");

或者，您可以使用 prependTo function（添加到元素的开头）：

$("#here").prependTo("#there");