03JavaScript程序设计修炼之道 2019-06-27_20-04-17 节点元素操作：复制

Posted 2022-02-26 hijackykun

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了03JavaScript程序设计修炼之道 2019-06-27_20-04-17 节点元素操作：复制相关的知识，希望对你有一定的参考价值。

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div><img src="img/2.jpg" alt=""></div>
    <p>*********************</p>
    <table border="1" id="tab">
        <tr>
            <td><input type="checkbox" name="" id="" /></td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
    </table>
    姓名: <input type="text" name="" id="uname" />
    性别: <input type="radio" name="sex" value="男" id="d" />男
         <input type="radio" name="sex" value="女" id="" />女
    年龄: <input type="text" name="" id="age" />   
    <input type="button" value="保存" id="btn"/> 
    <script src="../../01-ES/code/tool.js"></script> 
    <script>
        //var oDiv = document.querySelector("div");
        //var oDivClone = oDiv.cloneNode(true); // 传入参数true表示深层复制 连同子元素复制过来
        //document.body.appendChild(oDivClone);
        //document.body.appendChild(oDiv); “剪切” “粘贴”
        $("btn").onclick = function() 
            // 克隆第一行tr
            var obj_tr = $("tab").children[0].children[0].cloneNode(true);
            $("tab").appendChild(obj_tr);
            obj_tr.children[1].innerHTML = $("uname").value;
            // 判断男按钮选择状态
            var str = "";
            if($("d").checked) 
                str = "男";
             else 
                str = "女";
            
            obj_tr.children[2].innerHTML = str;
            obj_tr.children[3].innerHTML = $("age").value;
        
    </script>
</body>
</html>

以上是关于03JavaScript程序设计修炼之道 2019-06-27_20-04-17 节点元素操作：复制的主要内容，如果未能解决你的问题，请参考以下文章

03JavaScript程序设计修炼之道 2019-06-23_15-50-11 验证码

03JavaScript程序设计修炼之道_2019-07-07_14-33-54 BOM

03JavaScript程序设计修炼之道 2019-06-27_20-04-17 节点元素操作：复制

03JavaScript程序设计修炼之道 2019-06-25_20-34-21-2019-06-25_20-44-06 节点元素的操作：增删改

03JavaScript程序设计修炼之道 2019-05-23_20-28-51_2019-05-26_21-12-07 for练习hw

03JavaScript程序设计修炼之道_ JS进阶 OOP构造函数 2019-07/21-171247***0725-200514