javascript 动态添加城市

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 动态添加城市相关的知识,希望对你有一定的参考价值。

 

匿名函数的使用

createTextnode 创建文本

createElement   创建元素

appendChild     将文本或元素追加

 

<!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>

 

以上是关于javascript 动态添加城市的主要内容,如果未能解决你的问题,请参考以下文章

sublime text 3 添加 javascript 代码片段 ( snippet )

在片段中动态添加文本视图

使用 WindowManager.addView 添加动态视图

常用Javascript代码片段集锦

支持动态或静态片段的不同屏幕尺寸?

将片段添加到片段中(嵌套片段)