jQ 常用的修改DOM结构的方法

最新推荐文章于 2023-07-16 20:05:13 发布
最新推荐文章于 2023-07-16 20:05:13 发布
阅读量894 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： web 文章标签： javascript web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cominglately/article/details/78190260
本文详细介绍了如何使用JavaScript进行DOM操作，包括节点的添加、删除及移动等核心操作。具体涉及的方法有：append、prepend、after、before 和 remove。此外，还讨论了不同类型的节点，如JQ对象、DomString及函数返回的对象等。

参考链接 : http://api.jquery.com/after/

append https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode/append

remove https://developer.mozilla.org/zh-CN/docs/Web/API/ChildNode/remove

备注:

a. 新增节点的类型  JQ对象   DomString（<span>hello world </span>） 以及 function return 对象

b.  新增节点如果是已经存在的， 那么可以达到移动的效果(先删除 后添加)

parentNode.append((Node || DomString))    在父级节点后面追加一个元素

parentNode.prepend((Node || DomString))    在父级节点前面追加一个元素

refNode.after((Node || DomString))      在参考节点redNode后面添加一个元素

refNode.before((Node || DomString))      在参考节点redNode前面添加一个元素

refNode.remove()   删除参考节点refNode元素(包含它的子节点)






jQuery修改DOM结构
左岸
08-23 636
除了列出的3种语言外，请再添加Pascal、Lua和Ruby，然后按字母顺序排序节点：<!-- HTML结构 --> <div id="test-div"> <ul> <li><span>JavaScript</span></li> <li><span>Python</span></li> <li><span>Swift</span></li>
jquery--DOM操作
最新发布
m0_74194490的博客
07-05 1498
在javaScript的基础上创建的属于js的框架，是继Prototype之后又一个优秀的javaScript代码库（javaScript框架）有一些人嫌弃js用着不好，把 很多具有特殊功能的代码的集合，写在一个js文件中，名为jquery.js。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery 修改 DOM 文档
qq_37391214的博客
06-15 395
增加 对于文档内部的增加 直接对内部元素追加末尾 append() 向每个匹配的元素内部追加内容 $("p").append("<b>Hello</b>"); appendTo() 把某个元素匹配指定的元素追加到某个集合中，To 指向的就是集合 $("p").appendTo("div"); 把 p 加到 div 中 直接对元素内部的首位添加 prepend() 向每个匹配的元素内部添加前置内容。 $("p").prepend("<b>Hello&
jquery_修改dom
weixin_30548917的博客
05-18 169
// jquery_修改dom //代码1： // 创建DOM对象: var ps = document.createElement('li'); ps.innerHTML = '<span>Pascal</span>'; // 添加DOM对象: ul.append(ps); // 添加jQuery对象: ul.append($('#scheme...
使用 jQuery 修改 DOM 方法
NJU phd 在读。
03-31 2034
一旦你使用jQuery函数找到元素集合后，你就可以使用各种方法更改它们。 用该命令设置内部文本 text(): $(“h1”).text(“All about cats”); 用该命令设置内部文本 html(): $(“h1”).html(“I love cats”); 用该命令设置属性 attr(): $(".dog-pic").attr(“src”, “dog.jpg”); $(".google-link").attr(“href”, “http://www.google.com”); 用该命令修改 C
String 常用方法
jq1223的博客
01-15 147
1.charAt(下标);//返回对应下标的字符 ,最大只能是字符串长度-1，否则会报字符串下标越界异常StringIndexOutOfBoundsException 2.concat();//字符串拼接，不影响原来的字符串，返回新的字符串 3.indexOf(“”);//返回的是字符串对应的下标, 当字符串不存在的时候返回-1 5.length();//字符串长度 在数组中length是属性，在字符串中length是方法 6.Trim() //去掉字符串前后的空格 7.
java中常用的JQ+JS资源.zip
08-09
10. **前端开发工具**：资源可能也涵盖了如何使用开发工具，如浏览器的开发者工具（用于调试JavaScript代码，查看网络请求，修改DOM结构等），以及像Webpack这样的模块打包工具和Babel用于代码转换。 通过学习和...
Web前端开发技术（JQuery+Ajax）——第四章 JQuery操作DOM
m0_62096596的博客
03-21 511
Web前端开发技术（JQuery+Ajax）——第四章 JQuery操作DOM
解决JQ图片加载延迟问题的方法
jQuery是一个快速、简洁的JavaScript库，它封装了JavaScript常用的功能代码，能够以更简单的方式来操作DOM、处理事件、进行动画效果和AJAX交互。它简化了JavaScript的复杂性，让开发者可以使用更少的代码来实现丰富...
jQ多种相册切换效果.zip
07-11
3. **DOM操作**：通过jQuery修改元素的样式、内容或属性，如.css()、.html()、.attr()等，实现相册图片的显示与隐藏。 4. **动画效果**：使用jQuery的动画方法，如.fadeIn()、.fadeOut()、.slideToggle()等，实现...
jQuery对DOM进行增删改（jQuery实现动态添加html标签、删除html标签、删除html标签）
越努力越幸运的博客
06-30 532
文章目录jQuery对DOM进行增删改增增加子标签增加兄弟元素改删 jQuery对DOM进行增删改 增 增加子标签 A.appendTo(B) ：把A插入到B的最后一个子元素 A.prependTo(B) ：把A插入到B的第一个子元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <
jQuery HTML结构的处理 2.替换结构
laoma4102的专栏
01-31 4184
jQuery 提供了 replaceWith(content)和 replaceAll(selector)方法来实现 HTML 结构替换。 replaceWith()能够将所有匹配的元素替换成指定的HTML或DOM元素。例 如，对 于下面三个span 元素，使用replaceWith()把匹配的所有span元素及其包含的文本都替换为“盒子”。 包子包子包子 $("span"
jQuery 动态操作DOM元素
BowenXu11的博客
04-21 399
jQuery 动态操作DOM元素 //--------------------------------------------------------- 动态创建元素 //1.方法一：声明对象，然后追加 var htmlObject =$(‘html代码’); $(‘selected1’).append(htmlObject) //追加 （子元素） $(‘selected1’).prepend(...
jQuery操作dom元素（二）
Ardencyz
02-23 318
jQuery操作dom元素（二） jquery里创建dom元素 var str=$("&lt;span&gt;&lt;/span&gt;");//动态创建了span 创建完成的对象，追加给父级元素 append appendTo prepend prependTo 1.追加到当前元素的内容之后 $("#block").append(str);//把str追加到block中 str...
jq的一些常用方法
露露
08-17 844
工作的经常使用到的jq的方法例如(vue中)： &lt;ul class="tabTao"&gt; &lt;li class="active" @click="tabTao(0)"&gt; &lt;span&gt;{{$t("taocoin.ExchangeMarket")}}&lt;/span&gt; &lt;/li&gt; &amp
jQuery对Dom元素的增删改操作常用方法
m0_46639782的博客
07-16 779
toggleClass()：在元素上添加/移除一个类名。prepend()：将元素添加到目标元素的开头。html()：设置或获取元素的 HTML 内容。addClass()：为元素添加一个或多个类名。append()：将元素添加到目标元素的末尾。remove()：删除目标元素及其子元素。before()：在目标元素前添加元素。text()：设置或获取元素的文本内容。after()：在目标元素后添加元素。empty()：清空目标元素的子元素。attr()：设置或获取元素的属性值。
js & jq 的常用方法
Eaphy's Blog
01-15 838
JavaScript：document.getElementById(id).innerHTML="新的HTML"; //改变 HTML 内容 document.getElementById(id).attribute="新属性值"; //改变 HTML 属性document.getElementById("intro"); //通过id查找 HTML 元素 document.
javascript字符串string常用的几种方法
酱子
04-03 334
javascript字符串string常用的几种方法 javascript字符串string常用的几种方法（length/indexOf/lastIndexOf/search/charAt/match/slice/substr/substring/replace/concat/split） 1.获取字符串的长度 length 2.字符串转换为大写 toUpperCase() 3.字符串转换为小写...
JavaScript中String类型常用方法总结
qq_42822993的博客
09-02 167
String类型常用方法总结 一、字符方法 方法 描述 charAt(index) 返回指定索引位置的字符 charCodeAt(index) 以Unicode编码形式返回指定索引位置的字符 二、字符串操作方法 方法 描述 concat() 连接字符串。 slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。 substring() 提取字符串中两个指定的索引号之间的字符。 substr() 从起始索引号提取字符串中指定数目的字符
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值