首页 > web前端 > js教程 > 正文

jQuery中DOM节点操作方法总结

小云云
发布: 2018-01-24 15:40:03
原创
1454 人浏览过

本文主要介绍了jQuery中 DOM节点操作方法大全,感兴趣的朋友一起看看吧,希望能帮助大家更好的学习jQuery中DOM节点操作方法。

append(content | fn):向每个匹配的元素内部追加内容。

例如:向所有段落中追加一些HTML标记。

I would like to say: 

$("p").append("Hello"); [ 

I would like to say: Hello

 ]
登录后复制

appendTo():这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中

例如:把所有段落追加到ID值为foo的元素中。

I would like to say: 

$("p").appendTo("p");

I would like to say: 

I would like to say: 

登录后复制

prepend():向每个匹配的元素内部前置内容

例如:向所有段落中前置一些HTML标记代码。

I would like to say: 

$("p").prepend("Hello"); [ 

HelloI would like to say: 

 ]
登录后复制

prependTo(content):

把所有匹配的元素前置到另一个、指定的元素元素集合中。实际上,使用这个方法是颠倒了常规的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中。

例如:把所有段落追加到ID值为foo的元素中。

I would like to say: 

$("p").prependTo("#foo");

I would like to say: 

登录后复制

after():在每个匹配的元素之后插入内容。插入的元素和被插入的元素属于同一级,非父子级关系

例如:在所有段落之后插入一些HTML标记代码。

I would like to say: 

$("p").after("Hello");

I would like to say: 

Hello
登录后复制

before():在每个匹配的元素之前插入内容。

例如:在所有段落之前插入一些HTML标记代码

I would like to say: 

$("p").before("Hello"); [ Hello

I would like to say: 

 ]
登录后复制

insertAfter():把所有匹配的元素插入到另一个、指定的元素元素集合的后面。实际上,使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插入到A后面,而是把A插入到B后面

例如:把所有段落插入到一个元素之后。与 $("#foo").after("p")相同

I would like to say: 

Hello

$("p").insertAfter("#foo");

Hello

I would like to say: 

登录后复制

insertBefore():把所有匹配的元素插入到另一个、指定的元素元素集合的前面。实际上,使用这个方法是颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前面,而是把A插入到B前面。

例如:把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。

Hello

I would like to say: 

$("p").insertBefore("#foo");

I would like to say: 

Hello

登录后复制

wrap():把所有匹配的元素用其他元素的结构化标记包裹起来。

这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包裹元素。当HTML标记代码中的元素包含文本时无法使用这个函数。因此,如果要添加文本应该在包裹完成之后再行添加。

例如:用于包装目标元素的DOM元素

 

Hello

 

Goodbye

$('.inner').wrap(function() {  return '

'; });

 

  

Hello

 

 

  

Goodbye

 

登录后复制

unwrap():这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素(以及他们的同辈元素)会在DOM结构上替换他们的父元素。

例如:用ID是"content"的p将每一个段落包裹起来

  

Hello

  

cruel

  

World

$("p").unwrap()

Hello

cruel

World

登录后复制

wrapAll():将所有匹配的元素用单个元素包裹起来

这于 '.wrap()' 是不同的,'.wrap()'为每一个匹配的元素都包裹一次。这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。

例如:用一个生成的p将所有段落包裹起来

$("p").wrapAll("

");
登录后复制

或者

$("p").wrapAll(document.createElement("p"));
登录后复制

相关推荐:

实例分享JQuery 选择器、DOM节点操作练习

DOM节点内部插入的常用方法

实例讲解HTML标签解释成DOM节点

以上是jQuery中DOM节点操作方法总结的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!