2019-01-17

元素相关的操作方法!

<!DOCTYPE html>

<html lang="en">

    <meta charset="UTF-8">

        div {

width:200px;

            height:200px;

            border:1px solid red;

        }

<input type="button" value="显示效果" id="btn1"/>

<input type="button" value="清除第一个子元素" id="btn2"/>

<input type="button" value="清除所有的元素" id="btn3"/>

<div id="dv">

<script src="common.js">

    var i =0;

    my$("btn1").onclick =function () {

i++;

        var obj = document.createElement("input");

        obj.type ="button";

        obj.value ="按钮" + i;

        my$("dv").appendChild(obj);  //追加子元素

//把新的子元素插入到第一个子元素的前面

        my$("dv").insertBefore(obj,my$("dv").firstChild);

        //把新的子元素直接代替到第一个子元素的前面

//my$("dv").replaceChild(obj,my$("dv").firstChild);

    };

    my$("btn2").onclick =function () {

//移除父级元素中的第一个子级元素

        my$("dv").removeChild(my$("dv").firstElementChild);

    };

    my$("btn3").onclick =function () {

//点击按钮删除div中所有的子集元素

//判断父级元素中有没有第一个子元素

        while(my$("dv").firstElementChild){

my$("dv").removeChild(my$("dv").firstElementChild);

        }

};

</html>

通过本次学习主要需要掌握:

通过利用i来appendChild(追加元素);

insertChild(插入到哪个元素之前),其方法里用到了两个元素,第一个是放置原来的元素,第二个是放置需要插入的位置;

replaceChild(代替到哪个元素),其方法与insertChild一样;

removeChild(移除元素),其方法里面只需要写入需要移除元素的位置即可。

若想移除所有元素,则可以利用循环访问是否还有第一个元素,若有则执行removeChild方法,反之跳出循环或不执行循环语句即可。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容