<!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. zabbix3.0_网络发现问题

    问题1. Zabbix网络发现system.uanem找不到主机,打开zabbix_server.conf文件的debug DebugLevel=5 # 错误信息如下 # item [system.u ...

  2. 模块挂载、切换，uml模式、流程图模式

    模块挂载.切换,uml模式.流程图模式

  3. HDU_5783_DivideTheSequence

    HDU_5783_DivideTheSequence  点击打开链接 题意: 生成尽量多的连续的子串,且子串的前缀和大于等于0,输出符合题意的子串的数量. 这题目是参加四月份的个人训练赛遇到的,挺水的 ...

  4. docker-compose 报错记录

    1.如往常一样对docker-compose.yml配置修改后,docker-compose up -d 后台启动,启动后报错,由原来的done变成了error. 第一反应就是down掉这些容器: d ...

  5. Django-Rest framework中文翻译-generic-views

    通用视图 Django的通用视图......被开发为常见用法模式的快捷方式......它们采用视图开发中的某些常见习语和模式并对其进行抽象,以便您可以快速编写数据的常用视图,而无需重复自己. - Dj ...

  6. Meanshift，聚类算法

    记得刚读研究生的时候,学习的第一个算法就是meanshift算法,所以一直记忆犹新,今天和大家分享一下Meanshift算法,如有错误,请在线交流. Mean Shift算法,一般是指一个迭代的步骤, ...

  7. POJ 1655 Balancing Act && POJ 3107 Godfather

    题目大意: 根据题目的图很好理解意思,就是记录每一个点的balance,例如 i 的balance就是把 i 从这棵树中除去后得到的森林中含有结点数最多 的子树中的节点个数,然后找到所有节点中对应的b ...

  8. 小朋友的数字(codevs 3293)

    题目描述 Description 有n个小朋友排成一列.每个小朋友手上都有一个数字,这个数字可正可负.规定每个小朋友的特征值等于排在他前面(包括他本人)的小朋友中连续若干个(最少有一个)小朋友手上的数 ...

  9. PHP中HTTP_X_FORWARDED_FOR 和 REMOTE_ADDR使用详解

    1.REMOTE_ADDR:浏览当前页面的用户计算机的ip地址 2.HTTP_X_FORWARDED_FOR: 浏览当前页面的用户计算机的网关 3.HTTP_CLIENT_IP:客户端的ip 在PHP ...

  10. 20180725利用pmm监控管理mysql

    转自:https://www.percona.com/doc/percona-monitoring-and-management/architecture.html 报警机制https://www.p ...