50.dom添加新元素/标签

<head>
    <meta charset="UTF-8">
    <title>8.dom添加新元素/标签</title>
</head>
<body>
       <!-- //1:追加到指定父元素末尾（父元素中的最后一个子元素）
        //2：插入指定元素之前-->
        <div>基点</div>
        <div id="no1">
            <div>第一个元素</div>
        </div>
        <hr>
        <div id="btn">
            <input type="button" value="添加div元素到末尾">
            <input type="button" value="添加button元素到末尾">
            <input type="button" value="添加button元素到开头">
        </div>


</body>
        <script>
            //3:添加button到开头
            document.getElementById("btn").getElementsByTagName("input")[2].onclick=function () {
                /*创建的新标签*/
                var newinput = document.createElement("input");
                /*拿到第一个子标签*/
                var beforeAttend = document.getElementById("no1").getElementsByTagName("div");
                document.getElementById("no1").insertBefore(newinput,beforeAttend[0]);
                newinput.type="button";
                newinput.value=count;
                count++;
            }
            //2：添加button到末尾
            //写在外面只能创建一个新元素
            var count = 1;
            document.getElementById("btn").getElementsByTagName("input")[1].onclick=function () {
                var newinput = document.createElement("input");
                document.getElementById("no1").appendChild(newinput);
                newinput.type="button";
                newinput.value=count;
                count++;
                /*newinput.style.outline="none";
                newinput.style.border="0px";*/

            }
            //1:添加div到末尾
            var newDIV = document.createElement("div");
            document.getElementById("btn").getElementsByTagName("input")[0].onclick=function () {
                document.getElementById("no1").appendChild(newDIV);
                newDIV.innerText="增加到末尾";
                newDIV.style.color="red";
                newDIV.style.border="solid";
                newDIV.style.width="100px";
                newDIV.style.height="30px";
            }
        </script>
posted on 2022-04-13 14:49 小小程序猿level1 阅读(154) 评论(0) 收藏举报