jQuery DOM节点操作

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery DOM节点操作相关的知识,希望对你有一定的参考价值。

一、创建节点

var box = $(‘<div id =box>节点</div>‘);  //创建一个节点

$(‘body‘).appended(box);      //将节点插入<body>元素内部

 

二、插入节点

内部插入节点方法

append(content)            向指定元素后面插入节点content

append(function (index,hml) {})    使用匿名函数向指定元素后面插入节点content(html是原节点)

appendTo(content)        将指定元素移入到指定元素content内部后面

prepend(content)           向指定元素前面插入节点content

prepend(function (index,html) {})  使用匿名函数向指定元素前面插入节点content

prependTo(content)          将指定元素移入到指定元素content内部前面

 

外部插入节点方法

after(content)向指定元素的外部后面插入节点content

after(function(index,html) {}) 使用匿名函数向指定元素的外部插入节点content

before(content)向指定元素外部前面插入节点content

before(function(index,html) {})使用匿名函数向指定元素前面插入节点content

insertAfter(content)将指定节点移到指定节点元素content外部后面

insertBefore(content)将指定节点移到指定节点元素content外部前面

 

三、包裹节点

wrap(html)          向指定元素包裹一层html代码

wrap(element)        向指定元素包裹一层DOM对象节点 $(‘div‘).wrap(document.createElement(‘strong‘));

wrap(function (index) {})    使用匿名函数向指定元素包裹一层自定义内容

unwrap()             移除一层指定元素包裹的内容

wrapAll(html)         用html讲所有元素包裹到一起

wrapAll(element)        用DOM对象将所有元素包裹在一起

wrapInner(html)        向指定元素的子内容包裹一层html

wrapInner(elelment)      向指定元素的子内容包裹一层DOM对象节点

wrapInner(function (index) {})  用匿名函数向指定元素的子内容包裹一层

 

四、节点操作

//复制节点

$(‘body‘).append($(‘div‘).clone(ture)); //复制一个节点添加到HTML中

clone(true)参数可以为空表示只复制元素和内容,不复制事件行为。而加上true就可以复制事件行为。

//删除节点

$(‘div‘).remove();  //直接删除div元素

remove()不带参数时,删除前面指定元素。也可以带选择符参数,如$(‘div‘)remove(‘#box‘),只删除id=box的div。

//保留事件的删除节点

$(‘div‘).detach();  //保留事件行为的删除

删除后本身方法可以返回当前被删除的节点对象。

//清空节点

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

//替换节点

$(‘div‘).replaceWith(‘<span>节点</span>‘);  //将div替换成span元素

$(‘<span>节点</span>‘).replaceAll(‘div‘);  //同上

节点被替换后,所包含的事件行为就全部消失。

以上是关于jQuery DOM节点操作的主要内容,如果未能解决你的问题,请参考以下文章

锋利的jQuery ——jQuery中的DOM操作

使用jQuery操作DOM

jQuery的DOM操作

jquery总结04-DOM节点操作

jQuery之常用DOM操作

jquery Dom操作