当前位置：首页 > jquery

jquery复制

2026-04-08 00:12:58jquery

jQuery 复制元素或内容的方法

在 jQuery 中，复制元素或内容可以通过多种方式实现，包括克隆元素、复制文本或 HTML 内容等。

克隆元素

使用 .clone() 方法可以复制一个元素及其所有子元素和事件处理程序。该方法接受一个布尔参数，用于决定是否复制事件处理程序。

jquery复制

// 克隆元素并保留事件处理程序
var clonedElement = $('#originalElement').clone(true);

// 将克隆的元素插入到 DOM 中
clonedElement.appendTo('#targetContainer');

复制文本内容

使用 .text() 方法可以获取元素的文本内容，并将其复制到另一个元素中。

jquery复制

// 获取原始元素的文本内容
var textContent = $('#originalElement').text();

// 将文本内容复制到目标元素
$('#targetElement').text(textContent);

复制 HTML 内容

使用 .html() 方法可以获取元素的 HTML 内容，并将其复制到另一个元素中。

// 获取原始元素的 HTML 内容
var htmlContent = $('#originalElement').html();

// 将 HTML 内容复制到目标元素
$('#targetElement').html(htmlContent);

复制到剪贴板

如果需要将内容复制到用户的剪贴板，可以使用 document.execCommand 或现代的 Clipboard API。

// 使用 document.execCommand（已废弃，但在某些场景仍可用）
$('#copyButton').click(function() {
  var copyText = $('#textToCopy').text();
  var tempInput = $('<input>');
  $('body').append(tempInput);
  tempInput.val(copyText).select();
  document.execCommand('copy');
  tempInput.remove();
});

// 使用 Clipboard API（现代浏览器支持）
$('#copyButton').click(async function() {
  try {
    await navigator.clipboard.writeText($('#textToCopy').text());
    alert('内容已复制到剪贴板');
  } catch (err) {
    console.error('复制失败:', err);
  }
});