jQuery DOM节点操作

最新推荐文章于 2021-02-10 11:06:40 发布
最新推荐文章于 2021-02-10 11:06:40 发布
阅读量512 收藏 2
点赞数
分类专栏： JQuery 文章标签： jquery

http://edu.51cto.com/lesson/id-14470.html

一、创建节点

var box = $('<div id="box">节点</div>'); //创建一个节点
$('body').append(box); //将节点插入到<body>元素内部


二、插入节点


2.1 内部插入节点（即新节点作为指定节点的子节点）


$('div').append('<strong>新节点</strong>');//将新节点strong作为div的子节点插入到最后

$('div').append(function(){ return '<strong>新节点</strong>';});//作用同上


$('span').appendTo('div'); //讲 已经存在的span 节点移入 div 节点内，作为其子节点放在最后
$('span').appendTo($('div')); //同上


$('div').prepend('<span>节点</span>'); //将 span 插入到 div 内部的前面
$('div').append(function (index, html) { //使用匿名函数，同上
return '<span>节点</span>';
});
$('span').prependTo('div'); //将 span 移入 div 内部的前面
$('span').prependTo($('div')); //同上


2.2 外部插入节点（即新插入元素节点和参考节点属于同一级）


$('div').after('<span>新节点'</span>');//在div的同级节点后面插入span

$('div').after(function(){ return '<span>新节点'</span>');}

$('div').before('<span>节点</span>'); //向 div 的同级节点前面插入 span
$('div').before(function (index, html) { //使用匿名函数，同上
return '<span>节点</span>';
});
$('span').insertAfter('div'); //将 span 元素移到 div 元素外部的后面
$('span').insertBefore('div'); //将 span 元素移到 div 元素外部的前面


三、包裹节点（使用字符串代码将指定元素的代码包含着）


$('div').wrap('<strong></strong>');//在div外层包裹一层strong

$('div').wrap(function(){ return '<strong></strong>');});

$('div').wrap('<strong>可以带内容</strong>');//可以带内容

$('div').wrap('<strong><em></em></strong>');//可以包裹多层

$('div').wrap($('strong').get(0));//可以包裹一个已经存在的原生DOM

$('div').wrap(document.createElement('strong'));//可以包裹一个临时创建的原生DOM


$('div').unwrap();//移除一层包裹，多个需移除多次

$('div').wrapAll('<strong></strong>');//在所有div外面只包裹一层strong

$('div').wrapInner('<strong></strong>');//将div的html内容用strong进行包裹


.wrap()和.wrapAll()的差别：

如果html代码如下：

<body>

<div>

<li>li-1</li>

<li title='mytitle' id='myid'>li-2</li>

<li>li-3</li>

<li>li-4</li>

</div>

<div><b>div1</b></div>

<div>

<li>li-11</li>

<li>li-12</li>

<p>paragraph</p>

<li>li-13</li>

<li>li-14</li>

</div>

<div>

<li>li-21</li>

</div>

</body>


使用jQuery代码： $('li').wrapAll(document.createElement('strong'));

html代码变成以下代码：（html的顺序被修改，所有li节点被汇聚到一个div中，然后用一个strong将所有li都包含起来）

<body>

<div>

<strong>

<li>li-1</li>

<li id="myid" title="mytitle">li-2</li>

<li>li-3</li>

<li>li-4</li>

<li>li-11</li>

<li>li-12</li>

<li>li-13</li>

<li>li-14</li>

<li>li-21</li>

</strong>

</div>

<div>

<b>div1</b>

</div>

<div>

<p>paragraph</p>

</div>

<div></div>

</body>


而使用$('li').wrap(document.createElement('strong'));

html代码变成如下：（此时html代码顺序没有变化，只是在每个li节点外包裹了一个strong节点）

<body>

<div>

<strong>

<li>li-1</li>

</strong>

<strong>

<li id="myid" title="mytitle">li-2</li>

</strong>

<strong>

<li>li-3</li>

</strong>

<strong>

<li>li-4</li>

</strong>

</div>

<div>

<b>div1</b>

</div>

<div>

<strong>

<li>li-11</li>

</strong>

<strong>

<li>li-12</li>

</strong>

<p>paragraph</p>

<strong>

<li>li-13</li>

</strong>

<strong>

<li>li-14</li>

</strong>

</div>

<div>

<strong>

<li>li-21</li>

</strong>

</div>

</body>



四、节点操作

4.1 复制节点

$('div').clone(true);//复制一个div节点，true参数表示复制节点时，不仅复制元素和内容，同时复制事件行为，如果没有参数表示不复制事件行为。

$('div').remove();//直接删除div元素，可以携带selector参数，表示删除具有selector的div。

$('div').detach();//删除节点，但保留节点的事件

注：remove()和detach()都是删除节点，该方法本身可以返回当前被删除的节点对象，但区别在于前者节点对象保留事件行为，后者则保留。

$('div').empty();//删除节点里的内容

$('div').replaceWith('<span>DOM</span>');//将div替换成span元素

$('<span>DOM</span>').replaceAll('div');//同上

注意：节点被替换后，所包含的事件行为就全部消失了。






中下游国外我
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery DOM节点操作
weixin_50179284的博客
09-25 240
1.jQuery DOM节点的创建 创建流程：1.创建元素 document.createElement() 2.为节点添加一下属性 element.setAttribute(); 3.可以使用innerText或则innerHTML属性添加文本或则HTML内容 4.使用parentElement.appendChild()方法将新创建的节点添加到父节点中 例如：KaTeX parse error: Expected '}', got 'EOF' at end of input: …) { //通过jQue
jQueryDOM操作节点
腻害
05-05 148
（作者： 邱锡纶 撰写时间 ： 2020年05月03日 星期天） jQueryDOM操作节点 jQuery的选择器很强大，用起来又简单又灵活，但是搞了这么久，我拿到了jQuery对象，到底要干什么？答案当然是操作对应的DOM节点啦！回顾一下修改DOM的CSS、文本、设置HTML有多么麻烦，而且有的浏览器只有innerHTML，有的浏览器支持innerText，有了jQuery对...
jQueryDOM节点操作
weixin_47216582的博客
09-28 188
1.创建节点 -在jQuery中创建一个节点是非常迅速的，所创建出来的节点是一个jQuery对象 使用（“”）工厂方法,如创建一个div节点：（“”）工厂方法,如创建一个div节点：（“”）工厂方法,如创建一个div节点：(‘’)或$(’’),记得标签要闭合 2.插入节点 在创建好的节点插入有多种方式： append() 在节点末尾添加元素 如：append(content|fn):向每个匹配的元素内部追加内容 $(A).append(B),将B添加到A中 appendTo() 与append作用相同
jQuery DOM节点操作源码
10-15
在"jQuery DOM节点操作源码"中，我们可以深入理解jQuery是如何优雅地处理DOM（Document Object Model）节点的。以下是关于jQuery DOM操作的一些关键知识点： 1. **选择器**：jQuery 的核心功能之一就是强大的选择器...
14jQueryDOM节点操作.docx
05-02
在JavaScript和jQuery的世界里，DOM（Document Object Model）节点操作是网页动态交互的核心技术。DOM是一种树状结构，它代表了HTML或XML文档的结构，允许我们通过编程方式访问和修改文档内容。jQuery库简化了对DOM...
jQuery DOM插入节点操作指南
10-24
本章节主要介绍了jQuery在HTML中动态插入节点的各种方法,制作成表格，方便大家对比学习，需要的朋友可以参考下
jQuery DOM删除节点操作指南
12-01
这篇指南将深入探讨jQuery中删除DOM节点的几种方法，包括`remove()`, `detach()`, 和 `empty()`，并结合实例来解释它们的工作原理和适用场景。 1. **remove()方法** `remove()` 是jQuery中最常用的删除DOM元素的...
JQuery创建DOM节点的方法
01-19
本文实例讲述了JQuery创建DOM节点的方法。分享给大家供大家参考。具体分析如下： 用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点，然后可以用attr()方法来获取元素的各种属性的值。但真正的DOM操作并非这么简单。在DOM操作中，常常需要动态创建HTML内容，使文档在浏览器里的呈现效果发生变化，并且达到各种各样的人机交互的目的。 HTML DOM结构如下： <p class=nm_p title=欢迎访问软件开发网>欢迎访问软件开发网</p> <ul class=nm_ul> <li title='PHP\u7f16\u7a0b'>简单易懂的PHP编程</li>
JQueryDOM节点操作
迷麟的博客
05-05 249
节点的操作分为3个部分：1.创建节点；2.节点的插入；3.节点的删除； 先是创建流程，顺便先说下Javascript中创建DOM节点的流程： 如下： 创建元素：document.createElement（）； 为节点添加一个属性element.setAttribute（）； 可以使用innerText或则innerHTML属性添加文本或者HTML内容； 使用parentElement.appe...
jQuery操作DOM节点
abcdhulei的博客
06-24 335
创建节点 dom 节点创建的过程（创建节点<元素、属性、文本等>、添加节点的属性、加入到文档中） jQuery创建节点的方法： 创建元素节点: $("<div></div>")； 创建文本节点： $("<div>直接将文本的内容添加进去</div>")； 创建节点并给节点添加属性： var div = $("<div class...
jQuery--DOM的节点操作
前端小愤青
09-19 394
目录   创建节点 添加节点 替换节点 删除节点 清空节点 包裹节点  遍历节点 属性操作 文本操作 样式操作 创建节点 $(html)方法会根据传入的HTML标记字符串，创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象 返回值:该标记的jQuery对象 var $div=$("&lt;div class="one"&gt;添加节点&lt;/div&...
jquery属性操作，dom节点操作
Relaxaaa的博客
02-10 237
jquery属性操作 在js中对于属性的操作会直接使用属性名进行赋值与获取，但是jquery对齐进行了封装，提供了对不同属性操作的方法 属性操作函数 说明 html ( ) 设置或获取innerHTML属性的值 text ( ) 设置或获取innerText属性的值 val ( ) 设置或获取value属性的值 attr ( ) 设置或获取某属性的值 removeAttr ( ) 删除某属性 prop ( ) 跟attr()作用一样，但是主要针对可简写的属性 remo
jQueryDOM节点操作总结
WangM2001的博客
05-05 203
开发工具与关键技术：vs JavaScript 作者：王民 撰写时间：2020年5月2日 先前我就总结过JavaScript对象模型总结(DOM)。现在是在vs中jQuery进行DOM节点 的一些简单的操作 JavaScript中创建DOM节点 创建流程： 1.创建元素 document.createElement() 2.为节点添加一下属性 element.setAttribute(); 3....
jQuery教程：创建节点与DOM操作
"本课程主要讲解如何使用Jquery创建节点，包括使用$()工厂函数创建DOM对象并转化为jQuery对象，以及动态创建节点的注意事项。同时，提到了jQuery作为一个流行的JavaScript库，其轻量级、兼容性和丰富的功能，使得...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值