zoukankan      html  css  js  c++  java
  • DOM拷贝一个节点并插入页面

    javascript的cloneNode方法可以拷贝一个节点;
    方法:
    1、找到要拷贝的节点;
    2、利用cloneNode方法进行拷贝该节点;
    3、找到该节点的父节点;
    4、拷贝该节点;
    javascript示例:
            DOM.addEvent(window,'load',function(){
                DOM.log.header('Clone and Move a Node');
                var fireFoxLi = document.getElementById('safari');
                var firefoxLiClone = fireFoxLi.cloneNode(true);
                var unorderedList = fireFoxLi.parentNode;
                //下免得代码通过 document.getElementById('safari');方法取得并吧该节点赋值给firefoxLi变量后;
                //你得到的只是该节点的应用,并没有获得该节点的副本;
                unorderedList.appendChild(fireFoxLi);
                unorderedList.appendChild(document.createElement('BR'));
                unorderedList.appendChild(firefoxLiClone);//这句话添加了新的节点
            });

    html文件:
     This is my HTML page. <br>
        <div id='firefox' ></div>
        <hr/>
        <div>
            <ul>
                <li id='firefoxListItem' title="firefox">
                    <a href="#" title="get Firefox" id="firefox">Firefox 2.0</a>
                </li>
                <li>
                    <a href="#" title="getMicrsoft Inter" id='msie'>ie11</a>
                </li>
                <li>
                    <a href="#" title="check out safari" id='safari'>safari</a>
                </li>
                <li>
                    <a href="#" title="getOpera" id='Opera'>Opera</a>
                </li>
            </ul>
        </div>
    效果:




  • 相关阅读:
    【Spring-Security】Re01 入门上手
    【JDBC】Extra03 PostgreSQL-JDBC
    【JDBC】Extra02 SqlServer-JDBC
    【JDBC】Extra01 Oracle-JDBC
    【Oracle】Windiws-11G 安装
    【Hibernate】Re08 加载策略配置
    【Hibernate】Re07 关系映射处理
    【Hibernate】Re01.6 HQL
    【Hibernate】Re01.5 API
    【Quartz】
  • 原文地址:https://www.cnblogs.com/babyhhcsy/p/337b98ad9fe46bbf19254edc55109f22.html
Copyright © 2011-2022 走看看