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>

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>

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>

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>

JavaScript基礎 -- 常見DOM樹操作