<!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. CAD绘制一个单行文字（com接口VB语言）

    主要用到函数说明: _DMxDrawX::DrawText 绘制一个单行文字.详细说明如下: 参数 说明 DOUBLE dPosX >文字的位置的X坐标 DOUBLE dPosY 文字的位置的Y ...

  2. CAD在一个点构造选择集

    主要用到函数说明: IMxDrawSelectionSet::SelectAtPoint 在一个点构造选择集.详细说明如下: 参数 说明 [in] IMxDrawPoint* point 点坐标 [i ...

  3. 1043 输出PATest （20 分）

    题目链接:1043 输出PATest (20 分) 这道题目很简单,遍历整个字符串,统计相应字符的个数,然后按照题目要求进行输出即可. #include <bits/stdc++.h> u ...

  4. (C/C++学习)15.C语言字符串和字符数组

    说明:在C语言中字符串和字符数组有很多相似之处,却又有着一些不同.本文将针对其区别与联系,进行分析总结. 一.字符串 1.在C语言中,字符串是由双引号括起来的任意字符序列,如:"china& ...

  5. mysql5.7报Access denied for xxx@localhost 的解决

    使用root用户登录mysql数据库若如下报错 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passwor ...

  6. numpy.random模块常用函数解析

    numpy.random模块中常用函数解析 numpy.random模块官方文档 1. numpy.random.rand(d0, d1, ..., dn)Create an array of the ...

  7. 【10】AngularJS SQL

    AngularJS SQL 使用 PHP 从 MySQL 中获取数据 <div ng-app="myApp" ng-controller="customersCtr ...

  8. Linux学习总结（21）——CentOS7环境下FTP服务器的安装和配置

    1. 安装vsftpd #安装vsftpd yum install -y vsftpd #设置开机启动 systemctl enable vsftpd.service # 重启 service vsf ...

  9. J2EE 课件3 JSP标记

    •JSP标记包括指令标记.动作标记和自定义标记.其中自定义标记主要讲述与Tag文件有关的Tag标记    1.指令标记page page 指令用来定义整个JSP页面的一些属性和这些属性的值,属性值用单 ...

  10. Ubuntu 16.04下使用gcc输出汇编的.0文件为可执行文件时出现：`_start'被多次定义

    错误如下: `_start'被多次定义 /usr/lib/gcc/x86_64-linux-gnu/5/../../../x86_64-linux-gnu/crt1.o:(.text+0x0):第一次 ...