专栏首页柠檬先生jquery操作DOM 元素(2)

jquery操作DOM 元素(2)

.after()   在匹配的元素集合中的每个元素后面插入参数指定的内容,作为其兄弟节点。   .after(content[,content])     content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。     content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。   .after(function)     function 返回一个 HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。 this指向中当前位置。   结构:

    			    <div class="container">
			  	      <h2>Greetings</h2>
			  	      <div class="inner">Hello</div>
			  	      <div class="inner">Goodbye</div>
			    </div>
			    $('.inner').after('<p>Test</p>');

  效果:

			    <div class="container">
			  	      <h2>Greetings</h2>
			 	       <div class="inner">Hello</div>
			  	      <p>Test</p>
			  	      <div class="inner">Goodbye</div>
			 	       <p>Test</p>
			    </div>

.before()   根据参数设定,在匹配参数的前面插入插入内容。   .after(content[,content])     content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。     content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。   .after(function)     function 返回一个 HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。 this指向中当前位置。

    		  结构:
    			    <div class="container">
			  	      <h2>Greetings</h2>
			  	      <div class="inner">Hello</div>
			  	      <div class="inner">Goodbye</div>
			    </div>
			    $('.inner').before('<p>Test</p>');
		  效果:
			    <div class="container">
			  	      <h2>Greetings</h2>
			  	      <p>Test</p>
			 	       <div class="inner">Hello</div>
			 	       <p>Test</p>
			  	      <div class="inner">Goodbye</div>
			    </div>

.insertAfter()   在目标元素的后面插入集合中每个匹配的元素,插入的元素作为目标元素的兄弟元素。   .insertAfter(target)     target 一个选择器,元素,HTML字符串或者对象,匹配的元素将会被插入在由参数指定的目标后面。

		  结构:
    			    <div class="container">
			  	      <h2>Greetings</h2>
			  	      <div class="inner">Hello</div>
			  	      <div class="inner">Goodbye</div>
			    </div>
			    $("<p>Test</p>").insertAfter('.insertAfter');
		  效果:
			    <div class="container">
			  	      <h2>Greetings</h2>
			 	       <div class="inner">Hello</div>
			  	      <p>Test</p>
			  	      <div class="inner">Goodbye</div>
			 	       <p>Test</p>
			    </div>

.insertBefore()   在目标元素的前面插入集合中每个匹配的元素,插入的元素作为目标元素的兄弟元素。   .insertBefore(target)       target 一个选择器,元素,HTML字符串或者对象,匹配的元素将会被插入在由参数指定的目标前面。

		  结构:
    			    <div class="container">
			  	      <h2>Greetings</h2>
			  	      <div class="inner">Hello</div>
			  	      <div class="inner">Goodbye</div>
			    </div>
			    $("<p>Test</p>").insertBefore('.insertAfter');
		  效果:
			    <div class="container">
			  	      <h2>Greetings</h2>
			  	      <p>Test</p>
			 	       <div class="inner">Hello</div>
			 	        <p>Test</p>
			  	      <div class="inner">Goodbye</div>
			  </div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery操作DOM 元素(3)

    .detach()   从DOM 中去掉所匹配的元素。     .detach([selector])       select...

    用户1197315
  • NEC html规范

    HTML规范 - 整体结构 HTML基础设施 文件应以“<!DOCTYPE ......>”首行顶格开始,推荐使用“<!DOCTYPE html>”。 必须申明...

    用户1197315
  • jquery 操作DOM元素(1)

    .clone()   创建一个匹配的元素集合的深度拷贝。   .clone([withDataAndEvents])     ...

    用户1197315
  • jquery操作DOM 元素(3)

    .detach()   从DOM 中去掉所匹配的元素。     .detach([selector])       select...

    用户1197315
  • jquery选择器

    jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

    Devops海洋的渔夫
  • flex 布局

    CSS3 为我们提供了一种可伸缩的灵活的 web 页面布局方式 flexbox 布局,它具有很强大的功能,可以很轻松实现很多复杂布局。可以简便、完整、响应式地实...

    Krry
  • selenium-java web自动化测试工具

    本篇文章由来,这两天整理了下自己经常使用而且很熟练的项目,今天突然想起漏了一个,补上了,但想到还没对应的博客,那就写一个简单的

    肖哥哥
  • vue弹出层 +内容手风琴 简单实现

    yangdongnan
  • 用CSS画小猪佩奇

    腾讯NEXT学位
  • HTML5选择器

    czjwarrior

扫码关注云+社区

领取腾讯云代金券