js常见dom树操作

1.创建并增加元素节点

1. <ul id="ul">
2. <li>1</li>
3. <li>2</li>
4. <li>3</li>
5. </ul>
7. <script>
8. var parentElement = document.getElementById("ul");
9. var NewNode= document.createElement("li");
10. NewNode.innerText="AddNode";
11. parentElement.appendChild(NewNode);
12. </script>

 

2.判断子节点是否存在

1. <ul id="ul">
2. <li>1</li>
3. <li>2</li>
4. <li>3</li>
5. </ul>
6. <ol id="ol"></ol>
8. <script>
9. var parentElement = document.getElementById("ul");
10. var parentElement2 = document.getElementById("ol");
11. if(parentElement.hasChildNodes()) {
12.  alert("<ul>有子节点");
13. }
14. if(parentElement2.hasChildNodes()) {
15.  alert("<ol>有子节点");
16. }
17. </script>

 

3.新建节点插入指定子节点的前面

1. <ul id="ul">
2. <li>1</li>
3. <li>2</li>
4. <li>3</li>
5. </ul>
7. <script>
8. var parentElement = document.getElementById("ul");
9. var secondNode = parentElement.getElementsByTagName("li")[1];
10. varNewNode = document.createElement("li");
11. NewNode.innerText = "insertNode";
12. parentElement.insertBefore(NewNode, secondNode);   //将NewNode插入在secondNode前面
13. </script>

 

4.替换子节点

1. <ul id="ul">
2. <li>1</li>
3. <li>2</li>
4. <li>3</li>
5. </ul>
7. <script>
8. var parentElement = document.getElementById("ul");
9. var secondNode = parentElement.getElementsByTagName("li")[1];
10. varNewNode = document.createElement("li");
11. NewNode.innerText = "replaceNode";
12. parentElement.replaceChild(NewNode, secondNode);  //将secondNode替换成NewNode
13. </script>

 

5.删除指定节点

1. <ul id="ul">
2. <li>1</li>
3. <li>2</li>
4. <li>3</li>
5. </ul>
7. <script>
8. var parentElement = document.getElementById("ul");
9. var secondNode = parentElement.getElementsByTagName("li")[1];
10. parentElement.removeChild(secondNode);
11. </script>