JavaScript DOM学习笔记--创建追加元素

最新推荐文章于 2024-04-26 16:47:03 发布

weixin_33721344

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量108

点赞数

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/597369

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>动态添加城市</title>
        <script>
            window.onload = function(){
                document.getElementById("btn").onclick = function(){
                    //1.获取ul元素节点
                    var ulEle = document.getElementById("ul1");
                    //2.创建城市文本节点
                    var textNode = document.createTextNode("深圳");//深圳
                    //3.创建li元素节点
                    var liEle = document.createElement("li");//<li></li>
                    //4.将城市文本节点添加到li元素节点中去
                    liEle.appendChild(textNode);//<li>深圳</li>
                    //5.将li添加到ul中去
                    ulEle.appendChild(liEle);
                }
            }
        </script>       
    </head>

    <body>
        <input type="button" value="添加新城市" id="btn"/>
        <ul id="ul1">
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
        </ul>
    </body>
</html>