jQuery -> 克隆DOM元素

原创

Lyndon_梁飞 2023-01-04 14:05:04 ©著作权

文章标签 jQuery clone html javascript jquery 文章分类 运维

©著作权归作者所有：来自51CTO博客作者Lyndon_梁飞的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用jQuery内置的clone函数可以克隆DOM元素，而且clone函数支持链式调用

下例是clone的一个简单用法，它做了一个ul的副本，并添加到body中。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <ul>
      <li>list</li>
      <li>list</li>
      <li>list</li>
      <li>list</li>
    </ul>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript">
      <strong>$('ul').clone().appendTo('body');</strong>
    </script>
  </body>
</html>

利用clone函数我们可以完成一些更加复杂的操作

比如，克隆一个元素，然后删除被克隆的原始元素

仍然以ul为例，按照以下流程对其进行操作

获取ul(id='a')的所有li元素
为li元素添加click事件
克隆所有的li元素
把克隆的li元素添加到另一个ul(id='b')元素中
删除原始的ul(id='a')元素

代码示例如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <ul id="a">
      <li>list</li>
      <li>list</li>
      <li>list</li>
      <li>list</li>
    </ul>
    <ul id="b"></ul>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript">
      $('ul#a li')
        .click(function() {
          alert('List Item Clicked')
        })
        .parent()
        .clone(true)
        .find('li')
        .appendTo('#b')
        .end()
        .end()
        .end()
        .remove();
    </script>
  </body>
</html>xxx