.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>