JavaScript节点相关操作(2)创建和删除节点以及做一个联动菜单

最新推荐文章于 2020-07-14 14:56:19 发布

chance2015

最新推荐文章于 2020-07-14 14:56:19 发布

阅读量1k

点赞数

分类专栏： JavaScript_DOM编程 JavaScript学习大全文章标签： javascript

本文链接：https://blog.csdn.net/chance2015/article/details/50484175

版权

JavaScript_DOM编程同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

JavaScript学习大全

8 篇文章 4 订阅

订阅专栏

删除节点

<ul>
    <li>春</li>
    <li>下</li>
    <li>秋</li>
    <li>冬</li>
</ul>

例如需要删除”冬”这个节点
则需要先找到#li节点，再通过#li节点找到它的父节点使用parentNode函数
找到父节点后，再调用父节点的removeNode(index)方法去除某一个子节点
具体代码操作如下：
通过标签名找到#li节点

var li = document.getElementsByTagName('li');

然后找到最后一个节点所在的位置

var lastli = li[li.length-1];

然后再通过#li节点找到其父节点，再通过父节点去除指定节点

lastli.parentNode.removeChild(lastli);

完整代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的第一个网站</title>
<script type="text/javascript">
    function del(){
        var lis = document.getElementsByTagName('li');
        var lastli = lis[lis.length-1];
        lastli.parentNode.removeChild(lastli);
    }
</script>
<html>
    <head>
        <body>
            <input type ="button"value ="删除最后一个li" onclick ="del()"/>
            <ul>
                <li>春</li>
                <li>下</li>
                <li>秋</li>
                <li>冬</li>

            </ul>
        </body>
    </head>
</html>

创建节点

<ul>
    <li>春</li>
    <li>夏</li>
    <li>秋</li>
</ul>

例如在最后添加一个”冬”节点
步骤：先找到#li节点，再通过createElement(节点名);
同时还需要创建一个文本节点来保存”冬” 这个字符串
创建文本节点方法为createTextNode(String);
然后再将文本节点加入到新建的#li节点中
最后把#li节点加入到#ul节点中
创建#li节点

var li = document.createElement('li');

创建文本节点

var txt = document.createTextNode('冬');

将文本节点加到#li节点中

li.appendChild(txt);

最后将#li节点加入到#ul节点中

document.getElementsByTagName('ul')[0].appendChild(li);

完整代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的第一个网站</title>
<script type="text/javascript">
    function add(){
        //alert('cehsi');
        var li = document.createElement('li');
        var txt = document.createTextNode('冬');
        li.appendChild(txt);
        document.getElementsByTagName('ul')[0].appendChild(li);

    }
</script>
<html>
<head>
</head>
<body>
    <h1>创建节点</h1>
    <input type ="button" value ="增加" onclick ="add();"/>
    <ul>
        <li>春</li>
        <li>夏</li>
        <li>秋</li>
    </ul>
</body>
</html>

通过innerHTML批量添加节点

<ul></ul>

在上面的节点中一键键入春夏秋三个节点
首先还是先获取到ul节点
然后调用节点.innerHTML(String)方法
获取节点:

var ul = getElementsByTagName('ul')[0];

一键添加节点

ul.innerHTML='<li>春</li><li>夏</li><li>秋</li>';

完整代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的第一个网站</title>
<html>
<head>
</head>
<body>
    <input type ="button" value ="添加春夏秋" onclick ="add();"/>
    <input type ="button" value ="添加冬" onclick ="add1();"/>
    <ul></ul>
</body>
<script type="text/javascript">
        function add(){
        //  alert('ceshi');
            var ul = document.getElementsByTagName('ul')[0];
            ul.innerHTML='<li>春</li><li>夏</li><li>秋</li>';
        }
        function add1(){
        //  alert('ceshi');
            var ul = document.getElementsByTagName('ul')[0];
            //alert(ul.innerHTML);
            ul.innerHTML +='<li>冬</li>';
        }

    </script>
</html>

制作一个联动菜单

要求:
一个下拉选项框，选择了一个省后，可再选择该省内的城市
代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的第一个网站</title>
<script type="text/javascript">
    var area = [
        ['朝阳','海淀','门头沟'],
        ['淮南','淮北','合肥']
        ];
    function ld(){
        var sel = document.getElementById('prov');
        //alert(sel.value);
        var opt ='';

        if(sel.value =='-1'){
            document.getElementById('city').innerHTML = opt;
            return;
        }

        for(var i=0,len=area[sel.value].length;i<len;i++){
            opt = opt+'<option value="'+i+'">'+area[sel.value][i]+'</option>';
        }
    //  alert('ces ');
    //  alert(opt);
    document.getElementById('city').innerHTML = opt;

    }
</script>
<html>
<head>
</head>
<body>
    <select name ="" id ="prov" onchange="ld();">
        <option value="-1">请选择</option>
        <option value="0">北京</option>
        <option value="1">安徽</option>

    </select>
    <select name ="" id ="city">

    </select>
</body>
</html>

//2016年1月8号学习成果

chance2015

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript节点相关操作(2)创建和删除节点以及做一个联动菜单

删除节点<ul> <li>春</li> <li>下</li> <li>秋</li> <li>冬</li></ul>例如需要删除”冬”这个节点则需要先找到#li节点，再通过#li节点找到它的父节点使用parentNode函数找到父节点后，再调用父节点的removeNode(index)方法去除某一个子节点具体代码操作如下：通过标签名找到#li节点var
复制链接

扫一扫