复制节点/替换节点

最新推荐文章于 2023-03-08 22:43:05 发布
最新推荐文章于 2023-03-08 22:43:05 发布
阅读量254 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42923643/article/details/81630895
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复制节点/替换节点</title>
    <style>
        b.off{
            background: #ff0;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        // window.onload=function(){
            // var div = document.getElementsByTagName("div")[0];

            // div.onclick = function(){
            //  var div1 = div.cloneNode(true);
            //  div.parentNode.insertBefore(div1,div.nextSibling);
            // }
            // 注意:复制的div元素不拥有事件处理函数,但是拥有div标签包含的事件属性.


            // 替换节点
            // var p = document.getElementsByTagName("p");
            // // console.log(p.length);
            // var div = document.createElement("div");
            // div.innerHTML = "盒子";
            // var len = p.length;
            // for (var i = 0; i < len; i++) {
            //  // console.log(p.length);
            //  var div1 = div.cloneNode(true);
            //  p[i].parentNode.replaceChild(div1,p[i]);
            // }
        // }

        $(function(){
            // $("b").click(function(){
            //  // $(this).toggleClass("off");
            //  // 成倍增加
            //  $("b").clone(true).insertAfter("span");
            // });

            $("button").click(function(){
                // $(this).replaceWith("<div>"+$(this).text()+"</div>");
                // $(this).replaceWith(function(){
                //  return "<div>"+$(this).text()+"</div>";
                // });

                $("<div>"+$(this).text()+"</div>").replaceAll(this);              
            });
        });
    </script>
</head>
<body>
    <!-- <div class="bg" ondblclick="alert('123')">
        <p>段落文字</p>
    </div>
    <b>加粗文字</b>
    <p>hello</p>
    <span>jqueryClone+</span> -->

    <!-- <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p> -->

    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
</body>
</html>
恋恋玫瑰花
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
复制节点和替换节点
weixin_44545712的博客
07-08 466
复制节点和替换节点 ----------------------------------------------------------------------------------- 开发工具与关键技术:VS.JQuery作者：纳兹,撰写日期：2019.07.08,源于:老师教程 ----------------...
复制节点
qq_45683093的博客
10-30 180
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>复制节点</title> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> &lt...
web 复制_Web层中的状态复制
cusi77914的博客
06-29 248
无论是构建J2EE还是J2SE服务器应用程序，都有可能以一种形式或另一种形式使用Java Servlet，即直接通过JSP技术，Velocity或WebMacro等表示层，或者通过基于Servlet的Web服务来使用Java Servlet。实现，例如Axis或Glue。 Servlet API提供的最重要的功能之一是会话管理-通过HttpSession接口对每个用户的会话状态进行身份验证，到...
Web-API-DOM-删除节点-复制节点-三种动态创建元素区别-DOM 重点核心
dream_vk的博客
07-02 259
5.5 删除节点 node.removeChild(child) node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。 5.6 复制节点 node.cloneNode() node.cloneNode() 方法返回调用该方法的节点的一个副本。 注意： 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点 5.8 三种动态创建元素区别 document.w
JS HTML DOM 节点操作 属性操作
ly1010yl的博客
03-08 794
可以获取元素的指定元素值:接受的是一个以字符串形式表示的属性名称，返回的是一个字符串类型的值，如果指定属性不存在，则返回空字符串。格式：var new_e=ele.insertBefore(new_e,target_node);格式:var new_e=ele.appendChild(new_e);ele表示父元素，newNode替换后的节点，oldNode替换前的节点。格式：var node=ele.removeChild(node);ele表示被删除节点的父节点，node表示将要被删除的节点。
jQuery实现节点的追加、替换、删除、复制功能示例
10-19
主要介绍了jQuery实现节点的追加、替换、删除、复制功能,结合具体实例形式分析了jQuery针对DOM节点的操作技巧,涉及append()、prepend()、replaceAll()、replaceWith()empty()、remove()、clone()、clone()等方法的...
jQuery:节点(插入,复制,替换,删除)操作
01-19
代码如下:<... <head> <...jQuery插入,复制、替换和删除节点</title> [removed][removed] [removed] $(document).ready(function(){ //几种添加节点的方法 //$(“p”).append(“你好吗
jquery复制节点
03-29
在实际应用中，复制节点可能用在多种场景。比如，当用户添加新的表单项时，可以复制已有的一项并稍作修改；在构建拖放功能时，可能需要临时复制元素以便于移动；或者在某些动态界面中，为了保持布局一致性，可能会...
基本DOM节点操作
08-31
9. **替换节点** - `replaceChild()`：用新的节点`newNode`替换现有的`targetNode`。 理解并熟练掌握这些基本的DOM节点操作对于前端开发者来说至关重要，因为它们构成了页面动态更新和交互的基础。通过这些方法，...
ZooKeeper_Java操作(创建节点/获取节点/删除节点)
热门推荐
Simba_cheng的博客
03-14 1万+
关于ZooKeeper的介绍,网上很多介绍,我也懒的在多写了.. 直接上代码吧.. 长时间不用,会生疏.. 关于环境, 我自己在虚拟机上装了CentOs6.8服务器,然后在上面装了ZooKeeper,单机模式吧 用不到集群模式 Java操作ZooKeeper 创建单个节点 package com.java.module.zookeeper.zk_1; import or
javawebday05(添加 插入节点 标签 替换复制节点)
civilizationV的博客
09-12 571
<body> <ul id="ul1"> <li>节点1</li> <li id="li2">节点2</li> <li>节点3</li> <li>节点4</li> </ul> <span id="span" >222</span> <input type="button" value="add" onclick="add()"/> <input type="butto
节点操作之复制节点
m0_62962469的博客
03-15 1477
node.cloneNode() 该方法返回调用该方法节点的一个副本，也称为克隆节点/拷贝节点。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> li { list-style: none; } </style> </head&
.html实现节点的复制,DOM操作——怎样添加、移除、移动、复制、创建和查找节点。...
weixin_39609953的博客
06-19 767
(1)创建新节点createDocumentFragment()//创建一个DOM片段createElement_x()//创建一个具体的元素createTextNode()//创建一个文本节点(2)添加、移除、替换、插入appendChild()removeChild()replaceChild()insertBefore()(3)查找getElementsByTagName()//通过...
zookeeper小助手实现目录复制删除操作
约会远行的专栏
02-12 7327
背景 zookeeper有几个ui工具，但都不支持目录的复制，反正我没有找到。做项目时配置中心使用zk来维护的，当重新搭建环境想私有化一份配置时，那个费劲，既然找不到自己写一个小助手，作为其他ui工具的补充吧~ 需求 先写个能凑合用，写一个GUI的，得空再把它写成web的~ 且做的时候比较急，并没有什么设计可言，可能代码稍乱，得空整理一下，马上放假了~ 先放上~build 简单需求： ...
替换节点
yuhan20081021的专栏
06-02 754
replaceChild() 把一个给定父元素里的一个子节点替换为另外一个子节点 var reference = element.replaceChild(newChild,oldChild); 返回值是一个指向已被替换的那个子节点的引用指针。 如果被插入的子节点还有子节点，则那些子节点也被插入到目标节点中    练习： 当单击”北京”这个节点时,北京这个节点被  ”反恐”替换
linux 查看实例节点,JavaScript常见DOM节点操作实例
weixin_32924669的博客
05-13 150
JavaScript常见DOM节点操作示例，创建 ，插入，删除，复制，查找。JavaScript获取dom节点的方法获取上一个节点：previousElementSibling获取下一个节点：nextElementSibling获取父节点：parentElement获取子节点：childrenJS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】节点：根据 W3C 的 HTML DO...
jQuery类型(标签)选择器
恋恋玫瑰花
08-11 8008
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jQuery类型(标签)选择器&lt;/title&gt; &lt;script type="text/javascript" src=&q
把DOM对象转换为jQuery对象
恋恋玫瑰花
08-09 5289
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;把DOM对象转换为jQuery对象&lt;/title&gt; &lt;script type="text/javascript&qu
JavaScript利用节点实现按钮复制图片
最新发布
06-08
// 获取图片节点 var image = document.getElementById("myImage"); // 创建复制按钮 var copyBtn = document.createElement("button"); copyBtn.innerHTML = "复制图片"; // 添加按钮到页面 document.body....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值