动态改变dom结构常用方法

最新推荐文章于 2022-10-31 23:09:39 发布

weixin_30788619

最新推荐文章于 2022-10-31 23:09:39 发布

阅读量270

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/heviny/p/10815873.html

博客介绍了动态改变DOM结构的常用方法，转载自https://www.cnblogs.com/heviny/p/10815873.html ，聚焦于信息技术中前端开发的DOM操作相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态改变dom结构常用方法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>动态改变dom结构</title>
</head>
    <script type="application/javascript">
        /*
        * 1.document.createElement();创建
        * 2.parentnode.appendChild();追加
        * 3.parentNode.removeChild()；删除
        * 4.parentNode.insertBefore();插入
        * 5.parentNode.replaceChild();替换
        *
        *
        * */

        //1docuent.creatElement();
        function createle(){
            var obj=document.createElement("input");
            obj.type="text";
            console.log(obj);
        }
        function appendele(){
            var obj = document.createElement("input");
            obj.type="submit";
            var father = document.getElementById("fromer");
            father.appendChild(obj);
        }
        function removeele(){
            var father = document.getElementById("fromer");
            var child = document.getElementById("pwd")
            father.removeChild(child);
        }
        function insertele(){
            var father = document.getElementById("fromer");
            var child = document.getElementById("pwd");
            var newChild = document.createElement("input")
            father.insertBefore(newChild,child);
        }
        function replaceele(){
            var father = document.getElementById("fromer");
            var child = document.getElementById("pwd");
            var newChild = document.createElement("input");
            newChild.type="submit";
            father.replaceChild(newChild,child)
        }
    </script>
<body>
<button onclick="createle()">创建</button>
<button onclick="appendele()">追加</button>
<button onclick="removeele()">删除</button>
<button onclick="insertele()">插入</button>
<button onclick="replaceele()">替换</button>
<hr/>
<from id="fromer">
    用户名：<input type="text " name = "user"><br/>
    密码：<input id="pwd" type="password" name = "pwd"><br/>
    <input type="submit" value="提交" name="submit"><br/>
</from>
</body>
</html>

转载于:https://www.cnblogs.com/heviny/p/10815873.html