<!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. 使用Spring框架的步骤

    “好记性,不如烂笔头”.今天正式接触了Spring框架,第一次接触Spring框架感觉Spring框架简化了好多程序代码,开发效率大大提高.现在介绍使用Spring框架的步骤.(使用spring-fr ...

  2. 并发编程学习笔记(14)----ThreadPoolExecutor（线程池）的使用及原理

    1. 概述 1.1 什么是线程池 与jdbc连接池类似,在创建线程池或销毁线程时,会消耗大量的系统资源,因此在java中提出了线程池的概念,预先创建好固定数量的线程,当有任务需要线程去执行时,不用再去 ...

  3. R语言学习 - 箱线图（小提琴图、抖动图、区域散点图）

    箱线图 箱线图是能同时反映数据统计量和整体分布,又很漂亮的展示图.在2014年的Nature Method上有2篇Correspondence论述了使用箱线图的好处和一个在线绘制箱线图的工具.就这样都 ...

  4. [HNOI2006]最短母串 (AC自动机+状压)

    Description 给定n个字符串(S1,S2,„,Sn),要求找到一个最短的字符串T,使得这n个字符串(S1,S2,„,Sn)都是T的子串. Input 第一行是一个正整数n(n<=12) ...

  5. 15 AJAX

     AJAX AJAX 简介 AJAX 是 异步 JavaScript 及 XML(Asynchronous JavaScript and XML)的缩写.AJAX 不是一种新的编程语言,而是一种用于创 ...

  6. python安装外部模块Django

    Windows安装Django模块: 由于本人安装的Python版本是Python3.7,所以安装命令为:pip3 install django /pip3 install django安装过程中出现 ...

  7. 我的第一个随笔——MarkDown的简单用法！

    目录 我的第一个笔记 1. 学习简单的markdown语法 1.1 标题 1.2 引用 1.3 倾斜与加粗 1.4无序列表 1.5有序列表 1.6图片和网页 1.7分割线 1.8代码块 1.9结尾 2 ...

  8. UVA12118 Inspector's Dilemma（欧拉路径）

    题目: 某个国家有V(V≤1000)个城市,每两个城市之间都有一条双向道路直接相连,长度为T(每条边的长度都是T).你的任务是找一条最短的道路(起点和终点任意), 使得该道路经过E条指定的边.输出这条 ...

  9. Linux学习笔记(五) 账号管理

    1.用户与组账号 用户账号:包括实际人员和逻辑性对象(例如应用程序执行特定工作的账号) 每一个用户账号包含一个唯一的用户 ID 和组 ID 标准用户是系统安装过程中自动创建的用户账号,其中除 root ...

  10. 数位dp备忘录

    hdu 4734:把限制值化为数组形式,逐位求解 hdu 4507:类似于上题,其中求平方和的方法很妙 SPOJ  BALNUM Balanced Numbers:经典数位dp,注意两点,1,不要把前 ...