JavaScript-元素节点的增删改查

清疚 2022-04-17 01:10 274阅读 0赞

### 增加一个元素使用createElement()方法 ###

<p id="demo">单击按钮创建button元素</p>
    <button onclick="myFunction()">点我</button>
    <script>
    function myFunction(){
    	var btn=document.createElement("BUTTON");
    	document.body.appendChild(btn);
    };
    
    </script>

在函数中，我们定义一个btn用来接受一个语句：创建一个按钮，位置在body的最后一个子节点。

### 增加一个文本节点使用createTextNode()方法 ###

<p id="demo">单击按钮创建文本节点。</p>
    <button onclick="myFunction()">点我</button>
    <script>
    function myFunction(){
    	var t=document.createTextNode("Hello World");
    	document.body.appendChild(t);
    };
    
    </script>

和上面例子一样，不过这次我们创建的是一个文本节点。

### insertBefore() 方法可在已有的子节点前插入一个新的子节点。 ###

<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
    <ul id="myList2"><li>Water</li><li>Milk</li></ul>
    <p id="demo">单击该按钮将一个项目从一个列表移动到另一个列表</p>
    <button onclick="myFunction()">点我</button>
    <script>
    function myFunction(){
    	var node=document.getElementById("myList2").lastChild;
    	var list=document.getElementById("myList1");
    	list.insertBefore(node,list.childNodes[0]);
    }
    </script>

点击按钮后，将milk插入到list的第一个子节点。

### removeChild() 方法可从子节点列表中删除某个节点。 ###

<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
    <p id="demo">单击按钮移除列表的第一项</p>
    <button onclick="myFunction()">点我</button>
    <script>
    function myFunction(){
    	var list=document.getElementById("myList");
    	list.removeChild(list.childNodes[0]);
    }
    </script>

正如标题所示，每点击一次按钮就会删除第一个子节点。