极客教程jQuery 如何将一个div的内容复制到另一个div中
我们可以使用jQuery html()方法将一个div的内容复制到另一个div中。在jQuery中，还有许多其他方法，如clone()、append()和appendTo()等，都可以用来复制内容。jQuery是一个JavaScript库，旨在简化HTML DOM树的遍历和操作，以及事件处理、CSS动画和Ajax。在本教程中，我们将使用jQuery中的不同方法，将一个div的内容复制到另一个div中。
使用html()方法
使用jQuery html()函数是将一个div的内容复制到另一个div中的最简单方法。html()方法是用来检索或设置一个元素的HTML内容。当调用时，它返回元素的当前HTML内容，没有任何参数。当被调用时，它将元素的HTML内容设置为所提供的值。这种技术对于快速复制一个div的完整内容非常有效。
例子
例如，请看下面的HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div id="source">
<p>This is the source div.</p>
<p>It contains some text.</p>
</div>
<div>output</div>
<br />
<div id="result"></div>
</body>
<script>
var html = $("#source").html();
console.log(html);
document.getElementById("result").innerHTML = html;
</script>
</html>
使用append()和appendTo()方法
使用add()和appendTo()方法是复制div内容的另一种广受欢迎的技术。使用这些技术，一个元素可以被添加到另一个元素中。appendTo()函数用于将所选元素附加到一个元素上，而attach()方法则用于将一个元素附加到所选元素上。这些技术对于复制一个div的整体结构，包括它的子元素来说是非常好的。
例子
例如，考虑以下HTML —
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div id="source">
<p>This is the source div.</p>
<p>It contains some text.</p>
</div>
<div id="target">
<p>This is the target div.</p>
</div>
</body>
<script>
$("#source").children().appendTo("#target");
</script>
</html>
This will append all the children of the source div to the target div and the final result will be −
使用clone()方法
最后，我们有clone()方法。clone()方法用于复制选定的项目。当你希望复制一个div的内容而不把它从原来的位置上移走时，这个方法就会很方便。这种方法对于复制div并将其附加到另一个元素上很有用。
例子
例如，请考虑以下HTML –
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div id="source">
<p>This is the source div.</p>
<p>It contains some text.</p>
</div>
<div id="target"></div>
</body>
<script>
$('#source').clone().appendTo('#target');
</script>
</html>
这将创建一个源 div 的副本并将其附加到目标 div 上。最终的结果将与之前的相同。
使用innerHTML来显示输出
我们可以使用 div 元素的 innerHTML 属性，而不是使用 console.log() 函数来显示输出。
例子
例如，考虑下面的HTML —
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div id="source">
<p>This is the source div.</p>
<p>It contains some text.</p>
</div>
<div id="target"></div>
<div id="result"></div>
</body>
<script>
var html = $("#source").html();
document.getElementById("result").innerHTML = html;
</script>
</html>
这将把源div的内容复制到结果div中，并在屏幕上显示。
总结
在这篇博文中，我们学习了如何使用jQuery将一个div的内容复制到另一个div。html()方法，add()和appendTo()方法，以及clone()技术都被用来实现这个目的。我们还展示了如何使用innerHTML属性在屏幕上显示结果。如果你掌握了这些方法和它们的区别，你就能为你的个人用例选择最佳的解决方案。