如何使用 jQuery 克隆一个块？

jQuery 中的克隆方法执行一组匹配元素的深层复制。您可以创建数据的副本以及事件处理程序的副本。

句法：

$(selector).clone(true|false)

参数值：

• True指定事件处理程序也应该被复制
• False（默认）表示不应复制事件处理程序。

示例 1：在此示例中，我们没有将任何值传递给 clone 方法。

HTML

  

    
    
      
    
        #info {
            justify-content: center;
            width: 50%;
        }
  
        #container {
            border: 4px outset red;
            background-color: lightblue;
            justify-content: center;
            width: 50%;
        }
  
        #btn {
            background-color: #4CAF50;
            color: white;
            padding: 15px 32px;
            text-align: center;
            display: inline-block;
            font-size: 16px;
        }
    
  
    
        $(document).ready(function () {
            $("button").click(function () {
                $("#info").clone().appendTo("#container");
            });
        });
    

  

    
        Clone() method
          
        
            The .clone() method performs a deep 
            copy of the set of matched elements,
            meaning that it copies the matched 
            elements as well as all of their
            descendant elements and text nodes.
        
    
  
     Learn More
    
      
    
         Result 
    

  

输出：

示例 2：在此示例中，我们将“true”值传递给复制事件处理程序的 clone 方法。在这里，每当用户单击段落时，我们都会更改段落的背景颜色。正如您在输出中看到的那样，这将被复制。

HTML

  

    
    
  
    
        body {
            background-color: lightblue;
        }
  
        #main {
            text-align: center;
            margin: 20px 300px;
            padding: 10px;
            background-color: #00b3b3;
            display: inline-block;
            position: absolute;
        }
  
        button {
            padding: 20px;
            font-size: 30px;
            margin-top: 05px;
        }
  
        p {
            padding: 10px;
            font-size: 28px;
        }
    
      
    
        $(document).ready(function () {
            $("button").click(function () {
                $("body").append($("p:first").clone(true));
            });
  
            $("p").click(function () {
                $(this).css("background-color", "yellow");
            });
  
        });
    

  

    
         Clone 
    
  
    Clone method example

  

输出：