如何使用 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>
这会将源 div 的所有子元素附加到目标 div，最终结果为 −
使用 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 显示输出
除了使用 console.log() 函数显示输出之外，我们还可以改用 div 元素的 innerHTML 属性。
示例
例如，请考虑以下 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 属性将结果显示在屏幕上。如果您掌握了这些方法及其区别，您将能够根据个人用例选择最佳解决方案。
