jQuery克隆DOM节点

开发者芸硕技术 2022年11月14日

0 收藏 486 点赞 4,797 浏览 1349 个字

jQuery克隆DOM节点

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>" rel="external nofollow" >
<meta charset="UTF-8">
<title>b index</title>
<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>
</head>
<body style="margin:150px;">
    <div id="div001">div001</div>
    <div id="div002">div002</div>
    <div id="div003">div003</div>
    <div>
        <button id="btn001">click me to use clone()</button>
        <button id="btn002">click me to use clone(true)</button>
    </div>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="b/js/bootstrap.js"></script>
    <script type="text/javascript" src="js/index027.js"></script>
</body>
</html>

$(function() {
    $('#btn001').click(btn001Click);
    $('#btn002').click(btn002Click);
    initDiv();
});
function btn001Click() {
    // 这样会把id也克隆过来；这样clone()不会进行事件的拷贝；
    var $clone = $('#div001').clone();
    // clone(false) == clone()
    // var $clone = $('#div001').clone(false);
    $('#div003').after($clone);
}
function btn002Click() {
    // 这样会把id也克隆过来；这样clone(true)会进行事件的拷贝；
    var $clone = $('#div001').clone(true);
    $('#div003').after($clone);
}
function initDiv() {
    $('div').click(function() {
        // 获取点击事件的DOM对象: arguments[0].target.id
        console.log('%c' + arguments[0].target.id + ' click', 'font-size:16px;color:red');
    });
}