<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript">

        /*

         * cloneNode(boolean  deep)

         * deep:  false   仅克隆 当前的节点和属性

         *        true  克隆 完整的 节点 以及子节点和属性

         * */

        function  cloneN(){

            var p=document.getElementById("main");

            var myDiv=p.cloneNode(true);

            p.appendChild(myDiv);

            myDiv.setAttribute("id","myDiv");

        }

    </script>

</head>

<body onload="cloneN();">

<div  id="main">

    <span>节点1</span>

    <span>节点2</span>

    <span>节点3</span>

    <span>节点4</span>

</div>

</body>

</html>

克隆节点

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>选择你喜欢的书</title>

    <style>

        *{font-size: 12px; font-family: "Arial", "微软雅黑"; line-height: 25px;}

        div{padding: 5px; text-align: center;

        }

        div span{display: block;}

    </style>

</head>

<body>

<p>选择你喜欢的书：<input type="radio" name="book" onclick="book();">我和狗狗一起活下来 <input type="radio" name="book" onclick="book()">灰霾来了怎么办</p>

<div><img src="" alt="" id="image" onclick="img();"><span></span></div>

<script type="text/javascript">

    function  book(){

        /*先获取单选框*/

        var  radios=document.getElementsByName("book");

        /*获取img*/

        var img=  document.getElementById("image");

        if(radios[0].checked){

            /*给img标签中的属性 赋值*/

            img.setAttribute("src","images/dog.jpg");

            img.setAttribute("alt","这是一个小狗狗");

            img.nextElementSibling.innerHTML="我和小狗狗一起活下去";

        }else if(radios[1].checked){

            /*给img标签中的属性 赋值*/

            img.setAttribute("src","images/mai.jpg");

            img.setAttribute("alt","雾霾来了。。。。。");

            img.nextElementSibling.innerHTML="雾霾来了   活不下去....";

        }

    }

    function  img(){

        alert(document.getElementById("image").getAttribute("src"));

    }

</script>

</body>

</html>

操作节点属性

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>节点之增删改</title>

    <script type="text/javascript">

        window.onload=function(){

            var ul= document.getElementsByTagName("ul")[0];

            /*新增节点*/

            var newLi= document.createElement("li");

            newLi.innerHTML="小黑";

            ul.appendChild(newLi);

            /*获取ul第三个li*/

            var second= ul.getElementsByTagName("li")[2];

            ul.insertBefore(newLi,second);

            /*clone*/

            var ul2= document.getElementsByTagName("ul")[0].cloneNode(true);

            document.getElementById("d").appendChild(ul2);

            /*删除节点*/

            var reNode= ul.getElementsByTagName("li")[0];

            // ul.removeChild(reNode);

            /*替换节点*/

            ul.replaceChild(newLi,reNode);

        }

    </script>

</head>

<body>

<ul>

    <li>小强1</li>

    <li>小强2</li>

    <li>小强3</li>

</ul>

<div id="d">

</div>

</body>

</html>

节点之增删改替换

js20170320的更多相关文章

随机推荐

  1. 2-2 列表推导同 filter 和 map 的比较

    列表推导同 filter 和 map 的比较 参考廖雪峰的文档: filter()函数:用于过滤序列. filter()接收一个函数和一个序列.把传入的函数依次作用于传入的序列的每个元素,根据返回值是 ...

  2. HDU_1584_(DFS)

    蜘蛛牌 Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  3. SDK_组合框的使用

    组合框的使用 组合框的创建:有三种风格,分别 Simaple,Dropdown(可输入), 下拉列表(不可输入) 可以通过可视化编程中下拉列表的 下拉箭头 设置列表的长度 如何向组合框控件中添加数据, ...

  4. nginx平滑升级实战

    Nginx 平滑升级 1.查看旧版Nginx的编译参数 [root@master ~]# /usr/local/nginx/sbin/nginx -V [root@master ~]# ll ngin ...

  5. 【原】thinkphp实现存储session至redis

    Thinkphp\Library\Think\Session\Driver中新建redis缓存文件:Redis.class.php Thinkphp\Common\function.php 中 fun ...

  6. Git 分支使用

    一个主分支肯定是不够用的,不同的开发最好放在不同的分支上,在最后进行合并,不然在开发中会相互干扰. PS:环境Window xp,Git-1.8.4-preview20130916(http://gi ...

  7. 微信小程序中使用ECharts 异步加载数据 实现图表

    <!--pages/bar/index.wxml--> <view class="container"> <ec-canvas id="my ...

  8. 原来 JS 是这样的 - 关于 this

    引子 习惯了别的语言的思维习惯而不专门了解 JavaScript 的语言特性的话,难免踩到一些坑. 上一篇文章 中简单总结了关于 提升, 严格模式, 作用域 和 闭包 的几个常见问题,当然这仅仅是了解 ...

  9. （转载）不错的CSS写法

    根据微信订阅号“设计达人”推送的文章,学到了如题知识.个人尝试了一下,感觉还不错.原文链接:http://mp.weixin.qq.com/s/g9TyBwB9xIi45TGwTBOLSQ. 字体 从 ...

  10. JAVA实现创建Excel表并导出（转发）

    <span style="font-family:Verdana, Arial, Helvetica, sans-serif;line-height:25.2px;background ...