码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript元素的相关方法

时间:2018-07-28 20:38:27      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:idt   val   nbsp   click   order   value   div   doctype   color   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<input type="button" value="干掉第一个子元素" id="btn2"/>
<input type="button" value="干掉所有子元素" id="btn3"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>

    var i=0;
    my$("btn").onclick=function () {
        i++;
        var obj= document.createElement("input");
        obj.type="button";
        obj.value="按钮"+i;
        //my$("dv").appendChild(obj);//追加子元素
        //把新的子元素插入到第一个子元素的前面
        my$("dv").insertBefore(obj,my$("dv").firstElementChild);
        //my$("dv").replaceChild();---自己玩
    };

    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);
        }

    };
</script>
</body>
</html>

 

JavaScript元素的相关方法

标签:idt   val   nbsp   click   order   value   div   doctype   color   

原文地址:https://www.cnblogs.com/cuilichao/p/9383146.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!