JQuery节点操作-创建、插入、删除与克隆

最新推荐文章于 2021-10-27 17:46:50 发布
最新推荐文章于 2021-10-27 17:46:50 发布
阅读量464 收藏
点赞数
分类专栏： 前端专题学习汇总
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39218464/article/details/108941940
版权

新建

jquery(html)

插入

内部
1、尾部插入：jquery(obj).append(jquery(obj)) //jquery(obj).appendTo(jquery(obj))
2、头部插入：jquery(obj).prepend(jquery(obj)) //jquery(obj).prependTo(jquery(obj))
外部
1、尾部插入：jquery(obj).after(jquery(obj)) //jquery(obj).insertAfter(jquery(obj))
2、头部插入：jquery(obj).before(jquery(obj)) //jquery(obj).insertBefore(jquery(obj))

删除

jquery(obj).empty()
jquery(obj).remove()

克隆

jquery(obj).clone([true])

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    div{
        padding: 10px;
        border: 2px red dotted;
    }
    li{
        border: 2px solid skyblue;
        font-size: 30px;
    }
</style>

<script src="./jquery-3.4.1.min.js"></script>
<body>
    <h1>节点操作</h1>
    <div id="opBox"></div>
    <button id="addPic">添加一个图片</button>
    <button id="emptyPic">使用empty删除</button>
    <button id="removePic">使用remove删除</button>
    <button id="cloneDiv">使用clone</button>
</body>
</html>
<script>
    $(document).ready(function(){
        /*var $ul = $("<ul></ul>");
        for(var i = 1; i < 10; i++)
        $ul.append($("<li>这是第"+i+"</li>"));
        $("#opBox").append($ul);
        $("<li>这是尾部新添加的</li>").appendTo($("ul"));
        $("<li>这是头部新添加的</li>").prependTo($("ul"));
        $("ul").prepend("<li>这也是头部新添加的</li>");

        $("#opBox").after("<div>这是使用after添加的</div>");
        $("#opBox").before("<div>这是使用before添加的</div>");
        //使用insertAfter是紧挨着要添加到的节点后面添加
        $("<div>这是使用insertAfter添加的</div>").insertAfter("#opBox");
        //使用insertBefore是紧挨着要添加到的节点前面添加
        $("<div>这是使用insertBefore添加的</div>").insertBefore("#opBox");*/

        $("#addPic").click(function(){
            var $img = $("<img>").attr("src", "./img/t1.png");
            $("#opBox").append($img);
        });
        $("#emptyPic").click(function(){
            $("#opBox").empty();//使用empty方法将删除元素节点中的全部节点
        });
        $("#removePic").click(function(){
            $("#opBox").remove();//使用remove方法将删除该元素节点
        });
        $("#cloneDiv").click(function(){
            $("body").append($("#opBox").clone());
        });
    });
</script>
刘远山
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery--插入节点之内部插入（append()、appendTo()、prepend()、prependTo()）详解
吴声子夜歌的博客
10-02 3543
插入节点 在动态创建HTML元素节点后，还需将节点插入到文档中才有用。根据元素的插入位置不同，插入方法分为内部插入和外部插入，如下表： 类型 方法 描述 内部插入 append() 向每个匹配的元素内部追加由参数指定的内容 appendTo() 把所有匹配的元素追加到指定的元素中 prepend() 向每个匹配的元素内部前置内容 外部插入 after() 在每个匹配...
jquery学习（三）DOM
ZJOOPS的博客
01-25 411
1.获取设置内容 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值 不加参数就返回相应的内容，也可以加入相应参数，设置内容。 我们还可以设置回调函数，回调函数由两个参数：被选元素列表中当前元素的下标，以及原始值。 $('div').html(function (i, old) {
jq追加元素最前面_jQuery 追加元素的方法如append、prepend、before
weixin_39684495的博客
12-20 264
1.jQuery append() 方法jQuery append() 方法在被选元素的结尾插入内容。实例$("p").append("Some appended text.");2.jQuery prepend() 方法jQuery prepend() 方法在被选元素的开头插入内容。实例$("p").prepend("Some prepended text.");3、after() 和 befo...
jQuery——插入元素（append()、prepend()、after()、before()、insertAfter()、insertBefore()、replaceWith()）
奔跑的程序员
07-01 3016
append()、prepend()、after()、before()都支持多个参数 1、append() append() 该方法是在子元素的尾部插入内容 &lt;body&gt; &lt;ul&gt; &lt;li&gt;111&lt;/li&gt; &lt;li&gt;222&lt;/li&gt; &lt;li&gt;333&a
jquery 添加插入元素技巧
萧若寒
10-11 4391
jquery添加插入元素技巧： jquery添加分为在指定元素的里面添加和外面添加两种： 里面添加使用（append 和prepend） 里面添加又分为在里面的前面添加和后面添加 里面的前面添加使用 append 或appendTo 里面的后面添加使用 prepend和prependTo 外面添加使用（after和before） 外面添加又分为在外面的前面添加和后面添加 外...
jQuery:节点(插入,复制,替换,删除)操作
10-27
在使用jQuery进行网页开发时，节点的增删改查是频繁的操作之一。...以上就是关于在jQuery中进行节点插入、复制、替换和删除操作的知识点介绍。希望这些内容能够帮助你更好地理解和运用jQuery进行动态页面开发。
jQuery插入节点1
08-08
在本文中，我们将详细介绍 jQuery 中的插入节点方法，包括创建节点、插入节点、删除节点、克隆节点、替换节点和包裹节点等。 创建节点 在 jQuery 中，可以使用工厂函数 `$()` 来创建节点。例如，`$("<p>")` 将创建...
JQuery中DOM节点的操作与访问方法实例分析
10-15
在本文中，我们将详细介绍JQuery中操作DOM节点的方法以及访问节点的方式。JQuery提供了丰富的方法来操作DOM，这些方法使得我们能够轻松地添加、删除、复制和修改HTML元素，从而实现动态的网页内容更新。 首先，我们...
jQuery中对节点进行操作的相关介绍
10-27
jQuery提供多种方法来添加、插入和删除节点： 1. **添加节点元素**： - `append()`：在元素的末尾添加新的子元素。 - `prepend()`：在元素的开头添加新的子元素。 - `after()`：在元素之后添加新的兄弟元素。 -...
jquery创建节点
03-29
下面将详细介绍jQuery创建节点的相关知识点。 1. **文本节点的创建**： 使用`jQuery.text()`或`jQuery.html()`方法可以创建包含文本的元素。例如，如果你有一个空的`<div>`，你可以用`$('div').html('Hello, World...
jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）
热门推荐
幸福滴嘴角上扬的博客
09-07 17万+
最近项目不是很忙，抽空整理了下，js中常用追加元素的几种方法。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js中常用追加元素的几种方法&lt;/title&gt; &lt;link rel="stylesheet" h
Jquery添加元素（append，prepend，after，before四种方法区别对比）
梁先森的博客
01-18 9万+
jquery是一个平常比较喜欢用的js框架，因为上手比较简单吧，哈哈，下面呢，就介绍一下Jquery中如何添加元素。jquery添加元素一共有四个语句，分别是append（），prepend（），after（），before（） append的用法 这个方法的意思是在选中目标的结尾插入内容。举个例子： p>hellop> 如果执行下面这个插入语句，上面的语句会变成什么样子 $("
JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove系列方法的使用。
sunpeiyumail的专栏
06-15 4万+
做前端开发的，免不了的要操作页面HTML代码，JQuery中提供了许多非常便捷的方法，使我们很方便的操作HTML代码，这也许就是选择JQuery的原因吧。 　　那么让我们来看看有常用的有哪些方法： html方法，给元素添加html代码或者清空html代码（参数为空字符串）； append向元素的末尾添加html代码； appendTo这个方法跟append方法的很像，只是要添加的h
[js编程题]数组头部添加元素
Misslay's
02-19 3万+
题目描述 http://www.nowcoder.com/questionTerminal/93994cb28b1c4ec5ad7da4f9c33ebfbe在数组 arr 开头添加元素 item。不要直接修改数组 arr，结果返回新的数组 输入例子: prepend([1, 2, 3, 4], 10)输出例子: [10, 1, 2, 3, 4]function prepend(arr, i
利用jQuery实现加载公共头部和底部
旧颜
10-28 1万+
把头部和尾部通过jquery加载进页面                                       body{text-align: center;}                                                           我是主体                                
jQuery DOM 操作（基本操作、内部插入、外部插入、包裹操作）
weixin_34144450的博客
07-10 213
1.删除操作 （1）remove() 　　$(selector).remove([selector])   $("#div3").remove(); //删除 id 为 div3 的 div 标签 $("div").remove("#div3"); //删除 div 标签中 id 为 "div3" 的标签 （2）detach() 　　$(selector).detach([s...
JQ 添加节点和插入节点的方法总结
ss1106404013的专栏
10-20 3万+
添加节点的jquery方法： append()、prepend()、appendTo() 、prependTo() 插入节点的jquery方法： after() 、before() 、insertBefore() 、insertAfter() 举个例子来说明以上几种方法的用法：html例子: <nav> <ul> <li>序列号1</li> <li>
【jQuery】jquery如何在元素后面添加一个元素
michiko98的博客
10-27 6988
jQuery添加插入元素技巧： jquery添加分为在指定元素的里面添加和外面添加两种： 里面添加使用（append 和prepend） 里面添加又分为在里面的前面添加和后面添加 里面的前面添加使用 prepend和prependTo 里面的后面添加使用 append 或appendTo 外面添加使用（after和before） 外面添加又分为在外面的前面添加和后面添加 外面的前面添加使用 before或insertBefore 外面的后面添加使用 after或inser.
jQuery实现节点克隆
最新发布
05-19
使用jQuery可以很方便地实现节点克隆，可以使用clone()方法来进行克隆，具体步骤如下： 1. 选择要克隆的节点，并使用clone()方法进行克隆，同时将克隆节点保存在一个变量中。 ```javascript var cloneNode = $('#originalNode').clone(); ``` 2. 可以对克隆节点进行一些修改，比如修改节点的属性、样式、内容等。 ```javascript cloneNode.attr('id', 'cloneNode'); cloneNode.css('color', 'red'); cloneNode.html('This is a clone node.'); ``` 3. 将克隆节点插入到目标节点中，可以选择在目标节点前或后插入，也可以作为目标节点的子节点插入。 ```javascript $('#targetNode').after(cloneNode); // 插入到目标节点后 $('#targetNode').before(cloneNode); // 插入到目标节点前 $('#targetNode').append(cloneNode); // 插入到目标节点内部 ``` 完整代码示例： ```html <!DOCTYPE html> <html> <head> <title>jQuery Clone Node</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function(){ $('#cloneBtn').click(function(){ // 克隆节点 var cloneNode = $('#originalNode').clone(); // 修改节点属性、样式、内容 cloneNode.attr('id', 'cloneNode'); cloneNode.css('color', 'red'); cloneNode.html('This is a clone node.'); // 插入克隆节点 $('#targetNode').after(cloneNode); }); }); </script> </head> <body> <div id="originalNode">This is the original node.</div> <button id="cloneBtn">Clone Node</button> <div id="targetNode">This is the target node.</div> </body> </html> ``` 在上面的示例中，点击“Clone Node”按钮后会将原始节点克隆并插入到目标节点后面。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值