js节点操作，js事件：键盘；事件浏览器事件；鼠标事件

最新推荐文章于 2024-03-17 21:53:33 发布

三岁九年

最新推荐文章于 2024-03-17 21:53:33 发布

阅读量208

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/xh0112/article/details/112792930

版权

js节点

节点操作

节点操作

创建节点

元素节点：document.createElement(“标签名”);
返回值：新的元素节点
创建完成后，需要插入到页面中才能看到
文本节点
document.createTextNode(内容);
插入节点
node.appendChild
在父节点的最后添加一个新的子节点。
node.insertBefore(新节点，参考节点)
在父节点的参考节点前添加一个新的子节点。
如果参考节点为null，则在父节点的最后添
加新的子节点
删除节点
父节点.removeChild(子节点);
在父节点中移除该子节点
parentNode 父节点
自身元素.parentNode.remove()
node.remove();
在父节点中移除自身。
替换节点：
用一个节点去替换另外一个节点
父节点.replaceChild(新节点,旧节点);
复制节点
node.cloneNode([true]);
复制节点，克隆节点
如果参数为true，则将其所有子节点也克隆。

<script>
        window.onload = function() {
    
            // 创建节点
            var box = document.getElementsByTagName("div")[0];
            var p = document.createElement("p");
            console.log(p);
        }
    </script>
</head>

<body>
    <div class="box">
        <p>这是个p标签</p>
    </div>
</body>

创建节点
在这里插入图片描述

文本节点，插入节点：

    <script>
        window.onload = function() {
    
           //获取id节点
            var box = document.getElementById("box");
            //文本节点
            var text = document.createTextNode("三十功名尘与土");
            console.log(text);
            box.appendChild(text);
             }
    </script>    
    
<body>
    <div id="box">
        <p>八千里路云和月
            <span>满江红</span>
        </p>
        <p>臣子恨，何时灭</p>
    </div>
</body>

在这里插入图片描述
替换子节点

    <script>
        window.onload = function() {
    
            var p = document.createElement("p");
            p.innerHTML = "三十功名尘与土";
           //获取id节点
            var box = document.getElementById("box");
            //替换子节点
            box.replaceChild(p, box.lastElementChild);
             }
    </script>    
    
<body>
    <div id="box">
        <p>八千里路云和月
            <

最低0.47元/天解锁文章

三岁九年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js节点操作，js事件：键盘；事件浏览器事件；鼠标事件

js节点操作表格的添加删除节点操作创建节点元素节点：document.createElement(“标签名”);返回值：新的元素节点创建完成后，需要插入到页面中才能看到文本节点document.createTextNode(内容);插入节点node.appendChild在父节点的最后添加一个新的子节点。node.insertBefore(新节点，参考节点)在父节点的参考节点前添加一个新的子节点。如果参考节点为null，则在父节点的最后添加新的子节点删除节点父节点.remo
复制链接

扫一扫