1、节点操作（创建、添加、删除）
| 节点操作 | |
| 创建元素节点 | createElement |
| 创建文本节点 | createTextNode |
| 添加节点 | appendChild |
| 删除节点 | removeChild |
2、innerHTML添加节点文本
<body> <!-- 案例一：innerHTML添加文本 --> <div class="case1"> <h1>案例一</h1> <button>按钮</button> <ul></ul> </div> <script> // 案例一：innerHTML添加文本 var btn1 = document.querySelector('.case1 button'); var ul1 = document.querySelector('.case1 ul'); btn1.onclick = function () { ul1.innerHTML = ` <li>1</li> <li>2</li> <li>3</li> ` } </script> </body>
3、创建添加添加节点、节点文本(createElement、createTextNode、appendChild)
<body> <!-- 案例二：创建添加添加节点、文本 --> <div class="case2"> <h1>案例二</h1> <input type="text"> <button>按钮</button> <ul></ul> </div> <script> // 案例二：创建和添加节点、文本 var btn2 = document.querySelector('.case2 button'); var ul2 = document.querySelector('.case2 ul'); var input2 = document.querySelector('.case2 input'); btn2.onclick = function () { // 创建元素节点、文本 let li = document.createElement('li'); let txt = document.createTextNode(input2.value); // appendChild属性添加节点、文本 ul2.appendChild(li); ul2.appendChild(txt); } </script> </body>
4、删除元素节点（removeChild）
<body> <!-- 案例三：删除元素节点 --> <div class="case3"> <h1>案例三</h1> <button>按钮</button> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <script> // 案例三：removeChild属性删除元素节点 var btn3 = document.querySelector('.case3 button'); var ul3 = document.querySelector('.case3 ul'); var li3List = document.querySelectorAll('.case3 li'); for (let i in li3List) { li3List[i].onclick = function () { ul3.removeChild(li3List[i]); } } </script> </body>
4、源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { display: flex; justify-content: space-around; } </style> </head> <body> <!-- 案例一：innerHTML添加文本 --> <div class="case1"> <h1>案例一</h1> <button>按钮</button> <ul></ul> </div> <!-- 案例二：创建添加添加节点、文本 --> <div class="case2"> <h1>案例二</h1> <input type="text"> <button>按钮</button> <ul></ul> </div> <!-- 案例三：删除元素节点 --> <div class="case3"> <h1>案例三</h1> <button>按钮</button> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <script> // 案例一：innerHTML添加文本 var btn1 = document.querySelector('.case1 button'); var ul1 = document.querySelector('.case1 ul'); btn1.onclick = function () { ul1.innerHTML = ` <li>1</li> <li>2</li> <li>3</li> ` } // 案例二：创建和添加节点、文本 var btn2 = document.querySelector('.case2 button'); var ul2 = document.querySelector('.case2 ul'); var input2 = document.querySelector('.case2 input'); btn2.onclick = function () { // 创建元素节点、文本 let li = document.createElement('li'); let txt = document.createTextNode(input2.value); // appendChild属性添加节点、文本 ul2.appendChild(li); ul2.appendChild(txt); } // 案例三：removeChild属性删除元素节点 var btn3 = document.querySelector('.case3 button'); var ul3 = document.querySelector('.case3 ul'); var li3List = document.querySelectorAll('.case3 li'); for (let i in li3List) { li3List[i].onclick = function () { ul3.removeChild(li3List[i]); } } </script> </body> </html>
