码迷,mamicode.com
首页 > 编程语言 > 详细

javascript 动态添加城市

时间:2018-06-09 23:19:47      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:城市   meta   har   深圳   nbsp   title   btn   创建   添加   

 

匿名函数的使用

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 动态添加城市

标签:城市   meta   har   深圳   nbsp   title   btn   创建   添加   

原文地址:https://www.cnblogs.com/benjamin77/p/9161503.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!