<!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. ubuntu部署java环境

    一.安装java sudo add-apt-repository ppa:webupd8team/java sudo apt-get update sudo apt-get install oracl ...

  2. webstom2017最新破解 ------------ http://blog.csdn.net/voke_/article/details/76418116

    webstorm 作为最近最火的前端开发工具,也确实对得起那个价格,但是秉着勤俭节约的传统美德,我们肯定是能省则省啊. 方法一:(更新时间:2018/1/23)v3.3 注册时,在打开的License ...

  3. ThinkPHP---rbac权限管理

    [一]概论 (1)简介 rbac(role based access controal),全称基于用户组/角色的权限控制. (2)概况 目前来说,一般项目有两种权限管理方式①传统方式:②rbac方式. ...

  4. HDU多校Round 7

    Solved:2 rank:293 J. Sequense 不知道自己写的什么东西 以后整数分块直接用 n / (n / i)表示一个块内相同n / i的最大i #include <bits/s ...

  5. java 十四周总结

  6. SERE0014: Illegal HTML character: decimal 154

    问题:jmeter,生成报告转化成html,报错SERE0014: Illegal HTML character: decimal 154 原因: 某些字符,特别是控制字符#x7F-#x9F ,在XM ...

  7. 腾讯云：iptables基础

    iptables 基础 iptables 基本命令 任务时间:5min ~ 10min iptables 可以简单理解为 Linux 系统内核级防火墙 netfilter 的用户态客户端. Linux ...

  8. saltstack(四) saltstack的targeting、分组

    targeting支持如下matcher: Globing : '*', 正则: 指定-E参数,正则表达式匹配多个 List: 指定-L参数,salt -E 'web1-(prod|devel)' t ...

  9. 聊聊餐饮： 2016年，是我做生意9年来，最差的1年 by某老板

    晚上忙完事,在小区里点了个菜.  今年在这个小店点菜,基本没有等过.  比较好奇,就问了下老板,最近怎么没人. 经常在这个店吃饭,老板就和我多聊了几句. 2016年,是我做生意9年来,最差的1年.还好 ...

  10. macos-mojave

    macos-mojave https://itunes.apple.com/cn/app/macos-mojave/id1398502828?mt=12