jQuery的复制内容

1.clone（）

clone（）方法用于复制匹配的DOM元素，并可以选择是否复制事件处理程序。

语法：

$(selector).clone([withDataAndEvents])

//withDataAndEvents（可选）：布尔值，如果为 true，则复制元素的所有数据和事件处理程序。

 示例：

<div id="original">
    <p>这是一个段落。</p></div><button id="cloneButton">克隆元素</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>
$(document).ready(function() {
    $('#cloneButton').click(function() {
        var clonedElement = $('#original').clone(true); // 克隆元素并复制事件处理程序
        clonedElement.attr('id', 'cloned'); // 修改克隆元素的 ID
        clonedElement.appendTo('body'); // 将克隆元素追加到 body 中
    });
});
</script>

2.append（） 

append（）方法用于将指定的内容插入到每个匹配元素的末尾

语法：

$(selector).append(content)

content：要插入的内容，可以是 HTML 字符串、DOM 元素或 jQuery 对象

示例：

<div id="container"> 
<p>这是原始内容。</p> 
</div> 
<button id="appendButton">追加内容</button> 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
<script> $(document).ready(function() {
 $('#appendButton').click(function() { 
    $('#container').append('<p>这是追加的内容。</p>'); // 追加新的段落 
        });
     });
 </script>

 3.html（）

html（）方法用于获取或设置匹配元素的HTML内容。

语法：

$(selector).html([content])

//content（可选）：要设置的新 HTML 内容。如果不提供参数，则返回第一个匹配元素的 HTML 内容

 示例：

<div id="content"> 
<p>这是原始内容。</p> 
</div> 
<button id="setHtmlButton">设置新内容</button> 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
<script> $(document).ready(function() { 
    $('#setHtmlButton').click(function() { 
        $('#content').html('<p>这是新的内容。</p>'); // 设置新的 HTML 内容
         });
     }); 
</script>