在末尾添加节点

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在末尾添加节点</title>
</head>
<body>
    <ul id="ulid">
        <li>关关雎鸠</li>
        <li>在河之洲</li>
        <li>窈窕淑女</li>
        <li>君子好逑</li>
    </ul>
    <br/>
    <input type="button" value="add" onclick="add1();" />
    <script type="text/javascript">
    function add1(){
        //获取到ul标签
    var ul1 = document.getElementById("ulid");
    //创建标签
    var li1 = document.createElement("li");
    //创建文本
    var text1 = document.createTextNode("5555");
    //把文本加入到li下面
    li1.appendChild(text1);
    //把li加入到ul下面
    ul1.appendChild(li1);
    }
    </script>
</body>
</html>

初始效果

点击后效果

 

posted @ 2019-02-24 16:23  静心*尽力  阅读(121)  评论(0)  编辑  收藏  举报