1. 程式人生 > >動態改變dom結構常用方法

動態改變dom結構常用方法

char rem cli charset end value font create ica

動態改變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>

  

動態改變dom結構常用方法