博客

jQuery 如何将一个div的内容复制到另一个div中

  • Post category:jquery

要将一个div的内容复制到另一个div中，可以使用jQuery的.html()方法或.clone()方法。以下是详细的攻略：

HTML结构

首先，需要在HTML中创建两个div，一个作为源div，另一个作为目标div。以下是一个示例：

<div id="source">This is the source div.</div>
<div id="destination">This is the destination div.</div>

在上述示例中，我们创建了一个源div和一个目标div，分别使用IDsource和destination进行标识。

jQuery代码

接下来，需要使用jQuery将源div的内容复制到目标div中。以下是两个示例：

使用.html()方法

// Copy the content of the source div to the destination div
var sourceContent = $('#source').html();
$('#destination').html(sourceContent);

在上述示例中，我们首先使用$('#source').html()获取源div的内容，并将其分配给变量sourceContent。然后，我们使用$('#destination').html(sourceContent)将源div的内容复制到目标div中。

使用.clone()方法

// Copy the content of the source div to the destination div
var sourceClone = $('#source').clone();
$('#destination').html(sourceClone);

在上述示例中，我们首先使用$('#source').clone()复制源div及其所有子元素，并将其分配给变量sourceClone。然后，我们使用$('#destination').html(sourceClone)将源div的内容复制到目标div中。

示例

以下是一个完整的示例，演示了如何使用jQuery将一个div的内容复制到另一个div中：

<!DOCTYPE html>
<html>
<head>
  <title>Copy Div Content</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="source">This is the source div.</div>
  <div id="destination">This is the destination div.</div>

  <script>
    // Copy the content of the source div to the destination div
    var sourceContent = $('#source').html();
    $('#destination').html(sourceContent);
  </script>
</body>
</html>

在上述示例中，我们创建了一个源div和一个目标div，并使用jQuery将源div的内容复制到目标div中。

Tags: