Javascript jquery在两个ul'；s

我有下面的html和两个列表，我想按下一个按钮，在这两个列表之间交换ul，li的元素

<ul class="list-group" id="lines">
<li class="list-group-item> 1 <i class="fa fa-times" aria-hidden="true"></i></li>
<li class="list-group-item> 2 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>

<ul class="list-group" id="columns">
<li class="list-group-item> 3 <i class="fa fa-times" aria-hidden="true"></i></li>
<li class="list-group-item> 4 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>

预期结果将是

<ul class="list-group" id="lines">
<li class="list-group-item> 3 <i class="fa fa-times" aria-hidden="true"></i></li>
<li class="list-group-item> 4 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>

<ul class="list-group" id="columns">
<li class="list-group-item> 1 <i class="fa fa-times" aria-hidden="true"></i></li>
<li class="list-group-item> 2 <i class="fa fa-times" aria-hidden="true"></i></li>   
</ul>

但是我得到了错误

未捕获的TypeError:无法读取未定义的属性“appendTo”

---

如何使用jquery实现此功能，以及为什么

children.clone

未定义？

您只需获取

html（）

并插入其他文件，而无需进行克隆和追加：

$（“#交换列表”）。单击（函数（）{
var linesHtml=$（“#行”）.html（）；
var columnsHtml=$（“#columns”）.html（）；
$（“#行”）.html（columnsHtml）；
$（“#columns”）.html（linesHtml）；
});


1
2


3
4

交换
您在调用“children”和“clone”后忘了放“（）”……这些都是方法。
以下是示例代码：


$（“#交换列表”）。单击（函数（）{
var$temp1=$（“#行li”）；
var$temp2=$（“#列li”）；
$temp2.附于（#行）之后；
$temp1.附在（#列）之后；
});


1
2


3
4

交换列表
我更喜欢这种解决方案。谢谢你的帮助！
<ul class="list-group" id="lines">
<li class="list-group-item> 3 <i class="fa fa-times" aria-hidden="true"></i></li>
<li class="list-group-item> 4 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>

<ul class="list-group" id="columns">
<li class="list-group-item> 1 <i class="fa fa-times" aria-hidden="true"></i></li>
<li class="list-group-item> 2 <i class="fa fa-times" aria-hidden="true"></i></li>   
</ul>

$("#swaplists").click(function () {

 var $temp1 = $("#lines").children().clone();
 var $temp2 = $("#columns").children().clone();
 clearLinesAndColumns();
 $temp2.appendTo("#lines");
 $temp1.appendTo("#columns");

});