JavaScript结点的创建和追加、复制、删除

最新推荐文章于 2024-06-25 19:24:28 发布

dancheng_work

最新推荐文章于 2024-06-25 19:24:28 发布

阅读量675

点赞数

分类专栏： # JavaScript

本文链接：https://blog.csdn.net/dancheng1/article/details/77018283

版权

JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

1、结点的创建和追加

节点创建

元素节点：document.createElement(tag标签名称);

文本节点：document.createTextNode(文本内容);

属性设置：node.setAttribute(名称，值);

节点追加：

父节点.appendChild(子节点);

父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边

父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点

（1）正常生成

<body>
    <h2>结点的创建和追加</h2>
</body>
</html>
<script type="text/javascript">
    /**
     <ul>
     <li mean="热情">red</li>
     <li mean="冷静">blue</li>
     <li mean="生机">green</li>
     </ul>
    */
    var color = ['red', 'blue', 'green'];
    var color_mean = ['热情', '冷静', '生机'];

    //创建各种节点
    var ull = document.createElement('ul');
    for(var k in color){
        var lii = document.createElement('li');
        lii.setAttribute('mean', color_mean[k]);
        var txt = document.createTextNode(color[k]);
        //结点追加
        lii.appendChild(txt);
        ull.appendChild(lii);
    }
    //document.getElementsByTagName('body')[0].appendChild(ull);
    document.body.appendChild(ull);
</script>

效果图：

（2）已有节点追加，被追加节点要发生物理位置移动现象

<body>
    <h2>结点的创建和追加</h2>
    <ul>
        <li mean="热情">red</li>
        <li mean="冷静">blue</li>
        <li mean="生机">green</li>
    </ul>
    <ul>
        <li mean="饿">orange</li>
    </ul>
</body>
</html>
<script type="text/javascript">
    //给第二个ul追加页面已有节点：blue被追加进来
    //被追加节点要发生物理位置移动现象（节点的个数是固定的，只有一个）
    var blue = document.getElementsByTagName('li')[1];
    var second_ul = document.getElementsByTagName('ul')[1];
    second_ul.appendChild(blue);
</script>

效果图：

（3）已有节点追加，并追加到指定位置

<body>
    <h2>结点的创建和追加</h2>
    <ul>
        <li mean="热情">red</li>
        <li mean="冷静">blue</li>
        <li mean="生机">green</li>
    </ul>
    <ul>
        <li mean="饿">orange</li>
    </ul>
</body>
</html>
<script type="text/javascript">
    /**
     * orange追加给第一个ul，并设置到blue的前边
     * 父节点.indsertBefore(newnode.oldnode);把结点追加到oldnode结点前边
     * 父节点.replaceChild(newnode, oldnode);把新节点替换老结点
     */
    var blue = document.getElementsByTagName('li')[1];
    var orange = document.getElementsByTagName('li')[3];
    var first_ul = document.getElementsByTagName('ul')[0];
    //first_ul.appendChild(orange);
    //first_ul.insertBefore(orange, blue);   //orange放在blue的前边
    first_ul.replaceChild(orange, blue);
</script>

效果图：

2、节点复制操作

被复制节点.cloneNode(true/false);

true:深层复制

false:浅层复制

<body>
    <h2>节点复制操作</h2>
    <ul>
        <li mean="热情">red</li>
        <li mean="冷静">blue</li>
        <li mean="生机">green</li>
    </ul>
    <ul>
        <li mean="饿">orange</li>
    </ul>
</body>
</html>
<script type="text/javascript">
    var blue = document.getElementsByTagName('li')[1];
    var fu_blue = blue.cloneNode(true);     //深层复制（本身和内部子节点都复制）
    var fu_blue = blue.cloneNode(false);     //深层复制（只复制本身节点/包括本身的属性）

    //把复制的fu_blue追加到第二个ul里面
    var second_ul = document.getElementsByTagName('ul')[1];
    second_ul.appendChild(fu_blue);
</script>

效果图：

3、节点删除操作

父节点.removeChild(子节点);

<body>
    <h2>节点删除操作</h2>
    <ul>
        <li mean="热情">red</li>
        <li mean="冷静">blue</li>
        <li mean="生机">green</li>
    </ul>
    <ul>
        <li mean="饿">orange</li>
    </ul>
</body>
</html>
<script type="text/javascript">
    //删除green节点
    var green = document.getElementsByTagName('li')[2];
    green.parentNode.removeChild(green);
</script>

效果图：