jQuery修改DOM结构_动力节点Java学院整理
直接使用浏览器提供的API对DOM结构进行修改，不但代码复杂，而且要针对浏览器写不同的代码。
有了jQuery，我们就专注于操作jQuery对象本身，底层的DOM操作由jQuery完成就可以了，这样一来，修改DOM也大大简化了。
添加DOM
要添加新的DOM节点，除了通过jQuery的html()这种暴力方法外，还可以用append()方法，例如：
<div id="test-div">
<ul>
<li><span>JavaScript</span></li>
<li><span>Python</span></li>
<li><span>Swift</span></li>
</ul>
</div>
如何向列表新增一个语言？首先要拿到<ul>节点：
var ul = $('#test-div>ul');
然后，调用append()传入HTML片段：
ul.append('<li><span>Haskell</span></li>');
除了接受字符串，append()还可以传入原始的DOM对象，jQuery对象和函数对象：
// 创建DOM对象:
var ps = document.createElement('li');
ps.innerHTML = '<span>Pascal</span>';
// 添加DOM对象:
ul.append(ps);
// 添加jQuery对象:
ul.append($('#scheme'));
// 添加函数对象:
ul.append(function (index, html) {
return '<li><span>Language - ' + index + '</span></li>';
});
传入函数时，要求返回一个字符串、DOM对象或者jQuery对象。因为jQuery的append()可能作用于一组DOM节点，只有传入函数才能针对每个DOM生成不同的子节点。
append()把DOM添加到最后，prepend()则把DOM添加到最前。
另外注意，如果要添加的DOM节点已经存在于HTML文档中，它会首先从文档移除，然后再添加，也就是说，用append()，你可以移动一个DOM节点。
如果要把新节点插入到指定位置，例如，JavaScript和Python之间，那么，可以先定位到JavaScript，然后用after()方法：
var js = $('#test-div>ul>li:first-child');
js.after('<li><span>Lua</span></li>');
也就是说，同级节点可以用after()或者before()方法。
删除节点
要删除DOM节点，拿到jQuery对象后直接调用remove()方法就可以了。如果jQuery对象包含若干DOM节点，实际上可以一次删除多个DOM节点：
var li = $('#test-div>ul>li');
li.remove(); // 所有<li>全被删除
以上所述是小编给大家介绍的jQuery修改DOM结构的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了jQuery中offsetParent()方法用法,实例分析了offsetParent()方法的功能、定义及返回匹配元素所有祖先元素中第一个采用定位的祖先元素时的使用技巧,需要的朋友可以参考下2015-01-01
下面小编就为大家带来一篇jQuery监听文件上传实现进度条效果的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要介绍了jquery插件实现堆叠式菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
鼠标滑动过快导致动画重复执行，以至于页面乱了,下面为大家介绍个防止重复执行动画的方法2014-04-04
在项目实战中碰到了一些问题，例如，jquery如何使div居中，此问题一直困扰着我，因此寻找了一些方法，晒出来和大家分享一下2012-11-11
默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行2011-10-10
data模块是一个比较有趣的功能，可以为任意的Element 添加额外的数据。而且处理了循环引用和内存泄漏的问题。API非常简单，就是.data(key, value)用来保存，.data(key)用开查询数据。2011-06-06
jQuery ajax提交Form表单实例(附demo源码)
这篇文章主要介绍了jQuery ajax提交Form表单的方法,结合实例分析了jQuery ajax操作实现表单提交的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2016-04-04
这篇文章主要为大家详细介绍了jquery实现图片切换代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了jQuery对象的length属性用法,实例分析了length属性获取集合中对象数目的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
最新评论