【问题标题】:jQuery cloneTo instead of appendTo?jQuery cloneTo 而不是 appendTo?
【发布时间】:2010-11-14 21:55:39
【问题描述】:

我正在尝试使用 jquery appendTo 将元素复制到另一个容器中。 该对象确实已附加,但已从源中删除。 有没有办法可以追加元素,同时将源元素留在原处? 称它为副本 称它为克隆 随便你怎么称呼它。

这是我当前的代码:

jQuery(document).ready(function()
{
    jQuery('#button').appendTo('#panel'); //button should appear ALSO in panel.
});

【问题讨论】:

  • 到了这里,发现我真的在寻找 detach() 而不是 clonedetach 从 DOM 中删除该项目,但保留数据绑定,因此当您在其他地方 append 元素时,事件处理程序仍然可以工作。 api.jquery.com/detach

标签: javascript jquery html clone


【解决方案1】:

接近,但不够接近。下面的代码将clone()元素添加到#panel中。

jQuery(document).ready(function()
{
    jQuery('#button').clone().appendTo('#panel');
});

请注意,在同一页面中使用两次 ID 是违反标准的。所以,要解决这个问题:

jQuery(document).ready(function()
{
    jQuery('#button').clone().attr('id', 'newbutton').appendTo('#panel');
});

【讨论】:

    【解决方案2】:

    在添加之前,只需在您选择的 jQuery 对象上调用clone() 方法:

    $('#button').clone().appendTo('#panel');
    

    如果您还需要克隆附加到选定元素的所有事件处理程序,请将布尔值 true 作为参数传递给 clone() 方法。

    此外,您可能需要更改所选元素的id 属性... 这很简单:

    $('#button').clone().attr('id', 'button-clone').appendTo('#panel');
    

    【讨论】:

      【解决方案3】:

      您需要运行的代码是:

      jQuery(document).ready(function()
      {
          jQuery('#button').clone().appendTo('#panel'); //button should appear ALSO in panel.
      });
      

      它的作用是从 DOM 中获取节点,然后在内存中对其进行克隆。然后,该行获取这个新对象 (jQuery('#button').clone()),然后将其附加回 DOM 中的 #panel。这通常总是一个好的策略:尝试通过尽可能少地接触 DOM 来进行 DOM 操作。您可以对节点和元素进行大量操作,而无需在最后插入或附加它们。

      【讨论】:

      猜你喜欢
      • 2019-02-10
      • 2020-09-29
      • 1970-01-01
      • 2015-07-02
      • 1970-01-01
      • 2011-08-10
      • 1970-01-01
      • 1970-01-01
      • 2015-01-01
      相关资源
      最近更新 更多