JavaScript基础1——在末尾添加节点

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title>在末尾添加节点</title>
     </head>
     <body>
         <ul>
             <li>111</li>
             <li>222</li>
             <li>333</li>
             <li>444</li>
         </ul>
         <br>
         <input type="button" value="添加节点" onclick="addNode()" />
         <script type="text/javascript">
             function addNode() {
                 // 获取到ul
                 var ul = document.getElementsByTagName("ul")[0];
                 // 创建li
                 var li = document.createElement("li");
                 // 创建文本
                 var length = ul.children.length + 1;
                 var text = document.createTextNode(length + "" + length + "" + length);
                 // 在li中加入文本
                 li.appendChild(text);
                 // 在ul中加入li
                 ul.appendChild(li);
             }
         </script>
     </body>
 </html>