<!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. RabbitMQ系列(三)--Java API

    基于java使用RabbitMQ 框架:SpringBoot1.5.14.RELEASE maven依赖: <dependency> <groupId>com.rabbitmq ...

  2. Linux常用命令——关机与重启命令

    1.shutdown命令 shutdown [选项] 时间 --使用shutdown进行关机或重启会正确保存正在使用的服务,其他命令有一定的危险性,建议最好使用shutdown命令进行关机重启 选项: ...

  3. PS切图基本操作

    PS切图基本操作 2016-05-11 20:56:46|  分类: PhotoShop|字号 订阅     下载LOFTER我的照片书  |     1首先在“文件”中打开一张图片.   2点击“移 ...

  4. C++ string使用

    在c语言里,我们使用一个字符串时,是通过字符数组或者字符指针的方式来进行使用,在C++里,标准模板库已经给我们提供了string类型(string是以类的方式提供给我们使用). 定义和初始化strin ...

  5. C++ string 是否以‘\0’结尾 讨论

    转载https://blog.csdn.net/qq_31930499/article/details/80374310 之前在某篇文章中看到,C语言字符串是以’\0’结尾的,但是C++string类 ...

  6. Ubuntu安装Foxit PDF阅读器

    最近使用Ubuntu自带的PDF阅读器,发现使用体验较差,打算安装FoxitReader(可能是我习惯了Foxit和Adobe) Foxit官网 对系统平台要求如下:(支持Linux) 继续摸索了一下 ...

  7. X shell 6下载安装和简单使用

    ①前言:昨天已经上线了的智能家居项目出现了一个BUG,需要重新写个html发布到服务器上,由于公司大佬都在忙别的项目,时间比较紧张,这种小事就落到了我这个小喽啰身上.其实,写个html我还是可以接受的 ...

  8. LINUX-光盘

    cdrecord -v gracetime=2 dev=/dev/cdrom -eject blank=fast -force 清空一个可复写的光盘内容 mkisofs /dev/cdrom > ...

  9. Reading Lists

    * Non-academic 1. Slowing Down to the Speed of Life, by Richard Carlson and Joseph Bailey.2. Your Mo ...

  10. 洛谷 1071 潜伏者（NOIp2009提高组）

    [题意概述] 给出三行字符串,前两行代表密码与明文的对应关系,第三行为待翻译的文本.要求按照对应关系翻译文本. [题解] 直接模拟即可. 注意判断Failed的情况. #include<cstd ...