{site_name}

{site_name}

🌜 搜索

jQuery对象的clone()函数用于复制一个元素及其所有子元素,并返回一个新

前端 𝄐 0
jqueryclone用法
jQuery对象的clone()函数用于复制一个元素及其所有子元素,并返回一个新的jQuery对象,该新对象包含复制的元素。这意味着你可以对新的jQuery对象执行其他操作而不会影响原始元素。

下面是一个示例:

HTML代码:

<div id="original">
<p>This is some text.</p>
<button>Click me</button>
</div>


JavaScript代码:

// 复制 #original 元素并存储到 $copy 变量中
var $copy = $('#original').clone();

// 在文档中添加复制的元素
$('body').append($copy);

// 修改复制元素的内容
$copy.find('p').text('This is new text.');
$copy.find('button').text('Click me too!');

// 在控制台输出原始元素和复制元素的 HTML
console.log($('#original')[0].outerHTML);
console.log($copy[0].outerHTML);


在这个例子中,我们首先使用 jQuery 选择器 $('#original') 获取原始元素,并使用 clone() 函数创建了它的一个副本。我们将副本存储在 $copy 变量中,并将它添加到文档中,使用 $('body').append($copy)。

接下来,我们使用 $copy.find('p') 和 $copy.find('button') 选择器修改了复制元素内部的 <p> 元素和 <button> 元素的文本。

最后,我们使用 console.log() 输出了原始元素和复制元素的 HTML。你可以看到,修改了 $copy 对象中的元素并不会影响原始元素。

总之,clone() 函数是 jQuery 中一个非常有用的函数,它允许我们复制元素并对其进行修改而不会影响原始元素。