节点的创建、移除和克隆

最新推荐文章于 2023-10-18 11:17:57 发布
最新推荐文章于 2023-10-18 11:17:57 发布
阅读量352 收藏 1
点赞数
分类专栏： JavaScript学习笔记 文章标签： html javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34771938/article/details/120325413
版权

节点的创建

  • document.createElement() 方法用于创建一个指定标签名的HTML元素。

“孤儿节点”

  • 新创建出的节点是“孤儿节点”，这意味着它并没有被挂载到DOM树上，我们无法看见它。

  • 必须继续使用appendChild()或insertBefore()方法将孤儿节点插入到DOM树上。 

appendChild()

  • 任何已经在DOM树上的节点，都可以调用appendChild()方法，它可以将孤儿节点挂载到它的内部，成为它的最后一个子节点。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box1">
        <p>1</p>
        <p>1</p>
        <p>1</p>
    </div>

    <script>
        var box1 = document.getElementById('box1');
        // 创建p元素节点
        var oP = document.createElement('p');
        // 挂载到box1内部
        box1.appendChild(oP);
    </script>
</body>

</html>

insertBefore()

  • 任何已经在DOM树上的节点，都可以调用insertBefore()方法，它可以将孤儿节点挂载到它的内部，成为它的“标杆子节点”之前的节点。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box1">
        <p>1</p>
        <p>1</p>
        <p class="para">1</p>
    </div>

    <script>
        var box1 = document.getElementById('box1');
        // 标杆节点
        var para = box1.querySelector('p.para');
        // 创建p元素节点
        var oP = document.createElement('p');
        // 挂载到para之前
        box1.insertBefore(oP, para);
    </script>
</body>

</html>

小练习

  • 请动态创建出一个20行12列的表格。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td {
            width: 20px;
            height: 5px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <table id="mytable"></table>

    <script>
        // 请动态创建出一个20行12列的表格
        var mytable = document.getElementById('mytable');

        for (var i = 0; i < 20; i++) {
            // 创建了新的tr标签
            var tr = document.createElement('tr');
            for (var j = 0; j < 12; j++) {
                // 创建了新的td标签
                var td = document.createElement('td');
                // 让tr追加td标签
                tr.appendChild(td);
            }
            // 让mytable追加tr标签
            mytable.appendChild(tr);
        }
    </script>
</body>

</html>

  • 请制作九九乘法表（可以在刚才代码基础上改动升级）。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td {
            width: 60px;
            height: 30px;
            text-align: center;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <table id="mytable"></table>

    <script>
        // 请创建九九乘法表
        var mytable = document.getElementById('mytable');

        for (var i = 1; i <= 9; i++) {
            // 创建了新的tr标签
            var tr = document.createElement('tr');
            for (var j = 1; j <= i; j++) {
                // 创建了新的td标签
                var td = document.createElement('td');
                // 设置td内部的文字
                td.innerText = i + '*' + j + '=' + (i * j);
                // 让tr追加td标签
                tr.appendChild(td);
            }
            // 让mytable追加tr标签
            mytable.appendChild(tr);
        }
    </script>
</body>

</html>

移动节点

  • 如果将已经挂载到DOM树上的节点成为appendChild()或者insertBefore()的参数，这个节点将会被移动。
  • 这意味着一个节点不能同时位于DOM树的两个位置。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1">
        <p id="para">我是段落</p>
    </div>

    <div id="box2">
        <p>我是box2的原有p标签</p>
        <p>我是box2的原有p标签</p>
        <p>我是box2的原有p标签</p>
        <p>我是box2的原有p标签</p>
    </div>

    <script>
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var para = document.getElementById('para');
        var ps_inbox2 = box2.getElementsByTagName('p');

        // box2.appendChild(para);
        box2.insertBefore(para, ps_inbox2[0]);
    </script>
</body>
</html>

删除节点

  • removeChild() 方法从DOM中删除一个子节点。
  • 节点不能主动删除自己，必须由父节点删除它。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        <p>我是p节点0</p>
        <p>我是p节点1</p>
        <p>我是p节点2</p>
    </div>

    <script>
        var box = document.getElementById('box');
        var the_first_p = box.getElementsByTagName('p')[0];

        box.removeChild(the_first_p);
    </script>
</body>

</html>

克隆节点

  • cloneNode() 方法可以克隆节点，克隆出的节点是“孤儿节点”。
  • 参数是一个布尔值，表示是否采用深度克隆：如果为true，则该节点的所有后代节点也都会被克隆，如果为false，则只克隆该节点本身。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box1">
        <ul>
            <li>牛奶</li>
            <li>咖啡</li>
            <li>可乐</li>
        </ul>
    </div>

    <div id="box2"></div>

    <div id="box3"></div>

    <script>
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var box3 = document.getElementById('box3');
        var theul = box1.getElementsByTagName('ul')[0];

        // 克隆节点
        // 深度克隆
        var new_ul1 = theul.cloneNode(true);
        box2.appendChild(new_ul1);

        // 非深度克隆
        var new_ul2 = theul.cloneNode(false);
        box3.appendChild(new_ul2);
    </script>
</body>

</html>

小豪boy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
创建元素节点createElement和删除元素节点removeChild
qq_45305088的博客
11-03 1920
createElement <button>添加节点</button> <input type="text"> <ul> <li>香蕉</li> <li>苹果</li> <li>鸭梨</li> </ul> <script> var btn = document.querySelec
动态的创建一个元素createElement及删除一个元素
09-04
本文用示例为大家介绍下动态创建一个元素createElement及删除一个元素，感兴趣的朋友可以参考下
document.createElemet创建的元素怎么删除
qq_36350876的博客
11-25 2600
document.createElemet创建的元素怎么删除
html dom复制节点,jQuery DOM节点的复制、替换
weixin_34375356的博客
06-19 599
拷贝clone()克隆节点是DOM的常见操作，jQuery提供一个clone方法，专门用于处理dom的克隆.clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带...
动态创建、清空和删除元素节点
weixin_43741599的博客
03-31 1351
相信大家在做项目的过程中都会遇到一些动态性的创建和删除，那今天我就带你认识一些常见的动态性创建元素、清空和删除元素节点。想知道更多或者更详细的请查看w3c. <meta name="viewport" content="width=device-width" /> <title>Index</title> <style> .left,.ri...
JS实现添加,替换,删除节点元素的方法
10-22
主要介绍了JS实现添加,替换,删除节点元素的方法,实例分析了javascript针对节点元素的替换、删除及常用的几种添加技巧,需要的朋友可以参考下
C#实现TreeView节点拖拽的方法
09-03
然后，创建`moveNode`的一个克隆`NewMoveNode`并插入到目标位置，更新选中的节点为`NewMoveNode`，展开目标节点以显示拖放效果，最后移除原始拖动的节点`moveNode`： ```csharp void treeView1_DragDrop(object ...
JS简单添加元素新节点的方法示例
10-18
本示例主要讲解了如何使用JavaScript来创建、添加和克隆页面元素节点，这些都是前端开发中常见的操作。下面将详细解析这些方法： 首先，我们获取页面上的某个特定元素。在这个例子中，我们通过`getElementById`方法...
C#TreeView右键菜单操作在编辑树节点
11-04
在C#中，`TreeView`控件可以通过`System.Windows.Forms`命名空间中的`TreeView`类来创建和操作。你可以通过添加`TreeNode`对象来构建树结构，每个`TreeNode`代表树的一个节点。节点可以包含子节点，形成树状层次。 ...
jQuery-1.9.1源码分析系列（十一）DOM操作续之克隆节点
01-19
比如对节点使用.after/.before/.append等方法后，节点被添加到新的地方，原来的位置上的节点被移除了。有的时候需要保留原来位置上的节点，仅仅是需要一个副本添加到对应位置，这个时候克隆就有了使用场景。 　...
克隆节点、创建节点、发布评论的案例思路、children和querySelectorAll的区别
m0_46270297的博客
04-08 177
一、克隆节点 // 克隆节点 cloneNode // 语法：node.cloneNode(deep) // 作用：在内存中克隆一份节点 // 参数： // deep：是个布尔类型的值 true false // true： 深克隆（会克隆节点自身 + 以及节点里面所有的内容） // false： 浅克隆（只会克隆节点自身） 默认就是false // 如果希望在页面中看到...
JavaScript基础（DOM）-Document对象、Element 对象、Attribute 对象、动态的创建 删除 添加节点
muzidigbig的博客
11-25 3308
JavaScript HTML DOM（文档对象模型） 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。 要改变页面的某个东西，JavaScript 就需要获得...
document.createElement()删除创建元素
lobenton的路边摊
04-29 6881
今天遇到一个小问题，却耗费我半天的时候来研究。动态创建一个元素。但是我需要使用过之后再删除掉它。找了半天资料，才找到。如下：var mydiv=document.createElement("div");//创建一个元素.mydiv.setAttribute("id","macnie");//赋值给这个元素一个ID。a1.removeNode(true)  //删除这个元素.  
怎么使用JavaScript添加、移除、移动、复制、创建和查找DOM节点？
最新发布
jt15881622410的博客
10-18 256
使用JavaScript来添加、移除、移动、复制、创建和查找DOM节点。//创建一个 DOM 片段。//创建一个文本节点。
前端
qq_39586685的博客
04-24 682
HTML ##1、html的基本结构 <html> <head> <title>网页的标题</title> </head> <body> 主体内容 </body> </html> ##2、html网页的扩展名 .html或 .htm index.html或 index.htm在同一个...
DOM之元素的 创建+添加+删除+克隆
weixin_47075145的博客
07-18 2610
方式2利用innerHTML创建元素（不推荐用）innerHTML属性值不运行时，当作字符串，运行时当作js代码。
怎样添加、移除、移动、复制、创建和查找节点
weixin_43765747的博客
06-25 1473
1）创建新节点 　　createDocumentFragment() //创建一个DOM片段 　　createElement() //创建一个具体的元素 　　createTextNode() //创建一个文本节点 2）添加、移除、替换、插入 　　appendChild() //添加 　　removeChild() //移除 　　replaceChild() //替换 　　insertBefore() //插入 3）查找 　　getElementsByTagName() //通过标签名称 　　getEl
文件删除与sillyrename还有孤儿节点
zhang_shuai_2011的专栏
07-14 1781
NFS文件系统的unlink操作，当目标节点的目录下引用计数大于0时，则采用sillyrename策略，最后一个打开文件的进程关闭文件时候，会检测sillyrename的标志位，若置位，则将其删除。 ××××××××××××××××××××××××××××××××××× 上文是我11年7月刚进入实验室看NFSv3代码时候，做的笔记，现在回头看，理解的连皮毛都算不上，着实汗颜。 最近看FUSE
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值