前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jquery操作DOM 元素(2)

jquery操作DOM 元素(2)

作者头像
用户1197315
发布2018-01-19 16:04:56
1.2K0
发布2018-01-19 16:04:56
举报
文章被收录于专栏:柠檬先生柠檬先生柠檬先生

.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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-11-03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档