JQUERY插入,复制、替换和删除节点

最新推荐文章于 2020-11-18 20:11:43 发布
最新推荐文章于 2020-11-18 20:11:43 发布
阅读量947 收藏
点赞数
分类专栏： JS+JQuery 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
   <title>jQuery插入,复制、替换和删除节点</title> 
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> 
<script type="text/javascript"> 
   $(document).ready(function(){ 
    //几种添加节点的方法 
    $("p").append("<b>你好吗？</b>");//向p元素中追加《b》 
    $("<b>你好吗？</b>").appendTo("p");//将《b》追加到p元素中 
    $("p").prepend("<b>你好吗？</b>");//向p中前置《b》 
    $("<b>你好吗？</b>").prependTo("p");//将《b》前置到p元素中 
    $("p").after("<b>你好吗？</b>");//向p元素后插入《b》 
    $("<b>你好吗？</b>").insertAfter("p");//将《b》插入到p元素后边 
    $("p").before("<b>你好吗？</b>");//在p元素之前添加《b》 
    $("<b>你好吗？</b>").insertBefore("p");//将《b》插入到p元素前面 
   
   
    //几种删除节点的方法 
    var $li=$("ul li:eq(1)").remove();//删除ul节点中第2个元素节点 
    $("ul").append($li);//把刚删除的元素节点从新添加到ul元素中去 
    $("ul li").remove("li[title!=菠萝]");//将ul元素下title属性不等于"菠萝"的li元素删除 
    $("ul li:eq(1)").empty();//清空ul节点下第2个li元素的内容 
   
    //复制节点 
    $("ul li").click(function(){ 
      $(this).clone(true).appendTo("ul");//复制当前点击的节点，并将它追加到《ul》元素中，当添加参数时复制它的事件    
    }); 
     
    //替换节点 
    $("p").replaceWith("<strong>你最不喜欢的水果是？</Strong>"); 
    $("[name='rp']").replaceWith("<tr><td>gg</td><td>gg</td><td>gg</td><td>gg</td></tr><tr><td>gg</td><td>gg</td><td>gg</td><td>gg</td></tr>"); 
   
   }); 
</script> 
</head> 
<body> 
   <p>你好！</p> 
   你最喜欢的水果是？ 
   <ul> 
    <li title="苹果">苹果</li> 
    <li title="橘子">橘子</li> 
    <li title="菠萝">菠萝</li> 
    </ul> 
</body> 
</html>

moqiang02
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery:节点(插入,复制,替换,删除)操作
01-19
代码如下:<... <head> <...jQuery插入,复制、替换和删除节点</title> [removed][removed] [removed] $(document).ready(function(){ //几种添加节点的方法 //$(“p”).append(“你好吗
JavaScript之jQuery-3 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)...
weixin_34062469的博客
04-01 170
一、jQuery操作DOM -查询html操作 - html(): 读取或修改节点的HTML内容，类似于JavaScript中的innerHTML属性文本操作 - text(): 读取或修改节点的文本内容，类似于JavaScript中的textContent属性值操作 - val(): 读取或修改节点的value属性值，类似于 JavaScript 中的value值...
jQuery插入,复制、替换和删除节点
weixin_30537391的博客
12-29 149
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"...
jQuery:插入,复制,替换和删除节点
weixin_34179968的博客
03-04 96
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery插入,复制、替换和删除节点</title><script type="text/javascript" src="jquery-1...
jQuery创建、复制、替换、包裹、删除节点
三三
12-04 725
append()、prepend()、appendTo()、prependTo()、after()、before()、insertBefore()、insertAfter() 创建子元素类： 创建的内容作为目标元素的子元素。 （1）append()/appendTo() :目标元素结尾处插入内容(标签、文本内容)。 $(&amp;amp;amp;amp;quot;.box&amp;amp;amp;amp;quot;).append(&amp;amp;amp;amp;quot;&amp
Jquery节点插入、复制和替换方法
01-07
Jquery节点插入、复制和替换方法总结
jquery 添加节点的几种方法介绍
01-19
代码如下: <...jQuery插入,复制、替换和删除节点</title> [removed][removed] [removed] $(document).ready(function(){ //几种添加节点的方法 //$(“p”).append(“你好吗？”);//向p元素中追加
Jquery学习笔记分享
11-24
第1章. JQuery概述 2 1. Jquery基本作用 2 ...4. 替换节点 9 5. 包裹节点 9 6. 属性操作 9 7. 样式操作 9 8. 设置和获取html,文本和值 10 9. 遍历节点 10 10. css-DOM 操作 10 第4章. jQuery的事件 12
jQuery节点追加、替换、删除、复制
乘风破浪
09-03 8738
追加节点分为父子和兄弟节点的追加。每个追加节点的方法又分主动追加和被动追加。 //1、父子关系的添加 //主动添加 $('#shu').append('关羽');//往后添加 $('#shu').prepend('黄忠');//往前添加 //被动添加 $('黄盖').appendTo($('#wu')); $('陆逊').prependTo($('#wu')); //
节点的操作 创建、添加、移除、移动、复制
kungfu_panda的专栏
08-24 1965
（1）创建新节点 createDocumentFragment() //创建一个DOM片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点 （2）添加、移除、替换、插入 （1）创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元
JQuery中对option的添加、删除、取值
热门推荐
zhxp_870516的专栏
01-04 2万+
jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...});    //为Select添加事件，当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text();   //获取Select选择的Text 3.
实例实现DOM节点的添加、复制，替换和删除
龙城飞马将的博客
07-06 1076
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;复制、添加、删除、替换、插入和删除节点&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;
JS的节点操作：创建、增加、删除、复制、查找
liujian573281的博客
01-12 925
节点分成两种：文本节点，元素节点，大部分情况，我们只要元素节点。可以通过nodeType判断节点的类型，nodeType==3 是文本节点，nodeType==1 是元素节点。下面是节点的几种操作。1、创建节点：createElement() 接受一个参数，为要创建的标签名。var oXi=document.createElement('li');2、增加节点：appendChild()、inse
前端 节点控制（js、jquery）
秋来九月八
11-25 670
在 JavaScript 中，你可以使用 DOM（文档对象模型）来控制和操作网页中的元素节点。这些是一些常见的节点控制操作，通过它们，你可以对网页中的元素进行操作，以实现动态的内容生成、修改和删除，以及样式控制等功能。可以创建新的 HTML 元素节点，并存储在变量中，以便后续操作。可以创建新的 HTML 元素节点，并存储在变量中，以便后续操作。方法可以将一个元素节点添加为另一个元素节点的子节点。方法可以将一个元素节点添加为另一个元素节点的子节点，方法可以替换一个元素节点为另一个元素节点。
jquery删除，添加，替换，复制节点的几种常用方法
Warren技术宅的专栏
11-07 1599
//几种添加节点的方法      //$("p").append("你好吗？");//向p元素中追加《b》      //$("你好吗？").appendTo("p");//将《b》追加到p元素中      //$("p").prepend("你好吗？");//向p中前置《b》      //$("你好吗？").prependTo("p");//将《b》前置到p元素中      //$(
利用JQuery对节点进行增加、删除、复制、替换
weixin_48732879的博客
11-18 365
<body> <button>添加节点</button> <div> <ul> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li> </ul> </div> </body> JQuery.js $("button").click(func.
JS和jQuery插入节点的代码示例
最新发布
05-31
以下是在JavaScript和jQuery中插入节点的代码示例： JavaScript代码示例： ```javascript // 创建新的元素 var newElement = document.createElement('p'); newElement.textContent = '这是一个新的段落'; // ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值