博客刚刚上线，内容还在慢慢补齐。欢迎随便逛逛～
jQuery修改DOM结构
322 字
2 分钟
jQuery修改DOM结构
修改DOM结构
直接使用浏览器提供的 API 对 DOM 结构进行修改，不但代码复杂，而且要针对浏览器写不同的代码。 有了 jQuery，我们就专注于操作 jQuery 对象本身，底层的 DOM 操作由 jQuery 完成就可以了，这样一来，修改 DOM 也大大简化了
添加DOM节点
要添加新的 DOM 节点，除了通过 jQuery 的 html() 这种暴力方法外，还可以用 append() 方法，例如在<ul>内部插入内容
<div id="test-div"> <ul> <li><span>JavaScript</span></li> <li><span>Python</span></li> <li><span>Swift</span></li> </ul> </div>首先要拿到<ul>节点：
const $ul = $("#test-div>ul")调用 append() 传入 HTML 片段:
$ul.append("<li><span>jQuery</span></li>")也可以使用appendTo()
$("<li><span>jQuery</span></li>").appendTo($ul)append() 把 DOM 添加到最后，而prepend() 则把 DOM 添加到最前，prependTo()同理
如果要把新节点插入到指定位置，例如，JavaScript 和 Python 之间，那么，可以先定位到 JavaScript，然后用 after() 方法:
const js = $("#test-div>ul>li:first-child"); js.after("<li><span>Lua</span></li>");也就是说，同级节点可以用 after() 或者 before() 方法。
删除DOM节点
empty()删除所有匹配元素的子元素，不会删除自身节点remove()删除所有匹配的元素，包括自己
例如：empty()方法
var $li = $("#test-div>ul li") $li.empty() //删除后 <div id="test-div"> <ul> <li></li> <li></li> <li></li> </ul> </div>而remove()方法
$li.remove() //删除后 <div id="test-div"> <ul> </ul> </div>文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
相关文章智能推荐
1
jQuery操作DOM元素
jQueryjQuery对象提供了许多修改DOM元素的功能
2
jQuery动画
jQuery滑动动画 : 通过不断改变元素的高度(height)实现 slideDown() : 带动画的展开 slideUp() : 带动画的收缩 slideToggle() : 带动画的切换展开/收缩
3
jQuery事件
jQuery因为 JavaScript 在浏览器中以单线程模式运行，页面加载后，一旦页面上所有的 JavaScript 代码被执行完后，就只能依赖触发事件来执行 JavaScript 代码。 浏览器在接收到用户的鼠标或键盘输入后，会自动在对应的 DOM 节点上触发相应的事件。 如果该节点已经绑定了对应的 Jav…
4
jQuery介绍
jQueryjQuery 是 JavaScript 世界中使用最广泛的一个库。鼎盛时期全世界大约有 80 90%的网站直接或间接地使用了 jQuery。
5
jQuery插件
jQuery我们可以扩展 jQuery 来实现自定义方法。这种方式也称为编写 jQuery 插件。 在使用jQuery插件时，应该先引入jQuery库文件，然后在引用jQuery插件
随机文章随机推荐
博客刚刚上线，内容还在慢慢补齐。欢迎随便逛逛～
文章
69
分类
16
标签
17
总字数
178,517
运行时长
0 天
最后活动
0 天前
站点域名sukksa.github.io
Fireflyv6.16.8
Astrov7.3.2
Nodev22.23.0
pnpmv11.22.0
构建时间2026年10月18日 19:58:05
系统信息Linux / x86_64