动态生成DOM节点并插入指定的位置

最新推荐文章于 2023-07-17 09:31:19 发布

Ghostne

最新推荐文章于 2023-07-17 09:31:19 发布

阅读量2.3k

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/weixin_43165525/article/details/107822361

版权

这也是BIGO面试的其中之一，动态生成DOM节点并插入指定位置
原生方法1：
创建元素节点：Document.createElement(“div”)
创建属性节点：Document.createAttribute(“div”)
创建文本节点：Document.createTextNode(“div”)
插入节点的方法
插入父节点作为子节点
父节点.appendChild(“新节点”)
在指定的位置插入
父节点.insertBefore(新节点，在谁之前)
删除节点
父节点.removeChild(node)
替换子节点
父节点.replaceChild(node)
还有createComment（），insetData,replaceData等等的DOM操作。一下是代码
附加一个经常会出现在笔试或者面试题中的，childnode和children的区别
这两个都会返回该元素子节点的集合，那么总结出来的就是children只计算子节点，不包含文本节点和属性节点，而childnodes是包含文本节点和属性节点的

<!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>
        .red{
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- 创建元素节点和文本节点-->
    <p id="createElem">点击创建带有文本和属性的节点</p>
    <button onclick="myFunction()">click me</button>
    <script>
        function myFunction(){
            var btn=document.createElement("button");
            var text=document.createTextNode("CLICK ME");
            var style=document.createAttribute("class");
            style.value="red";
            btn.appendChild(text);
            btn.setAttributeNode(style);
            document.body.appendChild(btn);
        }
    </script>
</body>
</html>

Ghostne

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
动态生成DOM节点并插入指定的位置

这也是BIGO面时的其中之一，动态生成DOM节点并插入指定位置原生方法1：创建元素节点：Document.createElement(“div”)创建属性节点：Document.createAttribute(“div”)创建文本节点：Document.createTextNode(“div”)插入节点的方法插入父节点作为子节点父节点.appendChild(“新节点”)在指定的位置插入父节点.insertBefore(新节点，在谁之前)删除节点父节点.removeChild(node
复制链接

扫一扫