元素相关方法

最新推荐文章于 2023-01-04 22:02:03 发布

我的哥哥呦

最新推荐文章于 2023-01-04 22:02:03 发布

阅读量92

点赞数

分类专栏： webapi 文章标签：添加删除全清

本文链接：https://blog.csdn.net/qq_20497071/article/details/98446164

版权

webapi 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!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>

我的哥哥呦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素相关方法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> div{ width: 200px; height: 200px; bor...
复制链接

扫一扫

专栏目录