<!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. Win7 下 PB (PowerBuilder) Insert Control 崩溃的解决办法

    环境: WIN7 x86  PB8.0, x64系统目录不同,不过也可以试试 Insert -> OLE... -> Insert Control  - 崩溃 如果网上提供的办法解决不了你 ...

  2. 设置vscode为中文

    设置vscode为中文 ctr+shift+p 输入 configure language 进 en更改为zh-cn , 重启vscode即可 , 如果还不行,就安装插件

  3. Springboot + SLF4j + Log4j2 打印异常日志时，耗时要5-6秒

    1.使用jps -l 查看springboot项目的进程ID 2.使用命令jstack -l 进程ID > log.txt 打印堆栈信息到文件,内容如下: "http-nio-8065 ...

  4. CAD绘制多行文字

    在CAD设计时,需要绘制多行文字,用户可以设置设置绘制文字的高度等属性. 主要用到函数说明: _DMxDrawX::DrawMText 绘制一个多行文字.详细说明如下: 参数 说明 DOUBLE dP ...

  5. 「 CODE[VS] P2853 」 方格游戏

    题目大意 给定一张 $n\times n$ 的网格.每个格子上都有一个系数 $a$,先下 $A$ 和 $B$ 两人选择两条 $(1,1)\rightarrow (n,n)$ 路径.要求着两条路径不能相 ...

  6. 67.基于nested object实现博客与评论嵌套关系

    1.做一个实验,引出来为什么需要nested object 冗余数据方式的来建模,其实用的就是object类型,我们这里又要引入一种新的object类型,nested object类型 博客,评论,做 ...

  7. Vue2 + Koa2 实现后台管理系统

    看了些 koa2 与 Vue2 的资料,模仿着做了一个基本的后台管理系统,包括增.删.改.查与图片上传. 工程目录: 由于 koa2 用到了 async await 语法,所以 node 的版本需要至 ...

  8. Display PowerPoint slide show within a VB form or control window

    The example below shows how to use VB form/control as a container application to display a PowerPoin ...

  9. [luoguP1220] 关路灯（DP）

    传送门 如果去关某一个灯,那么途中经过的灯都能关闭,那么就是连续一段区间,区间DP. f[i][j][0] 表示关完 i, j 这个区间且在 i 这个位置 f[i][j][1] 表示关完 i, j 这 ...

  10. -sql语句练习50题(Mysql学习练习版)

    –1.学生表 Student(s_id,s_name,s_birth,s_sex) –学生编号,学生姓名, 出生年月,学生性别 –2.课程表 Course(c_id,c_name,t_id) – –课 ...