为什么appendTo（）和insertAfter（）更改字体大小？

Question

使用jQuery插入AP标签H1之后，我得到不同的字体大小由两个不同的方法appendTo（）和insertAfter（）

见工作示例：http://jsfiddle.net/GnWcU/

$('<p></p>', { 
    text: 'Sub Header 1', 
    class: 'sh1' }).first().appendTo('h1'); 

$('<p></p>', { 
    text: 'Sub Header 2', 
    class: 'sh2' }).first().insertAfter('h1'); 

看来好像在p appendTo（）从它所附加的元素继承它的CSS。如果那是为什么不insterAfter（）也继承？

或者，如果它不是继承CSS这里发生了什么？

Answer 1

答案在于每个操作产生的HTML。

appendTo()会将内容插入到所选元素中，作为该元素的最后一个子元素。在你的榜样，看起来像这样：

<div> 
    <h1> 
     Main Header 
     <p class="sh1">Sub Header 1</p> 
    </h1> 
</div> 

insertAfter()，另一方面，将选择的元素之后插入内容。在你的榜样，看起来像这样：

<div> 
    <h1>Main Header</h1> 
    <p class="sh2">Sub Header 2</p> 
</div> 

所以第一字体大小是大的，因为它里面的标签<h1>，因此继承了它的造型。
第二个，它只是跟着这个<h1>标签，所以它的造型不受影响。

Answer 2

appendTo的看跌期权意味着内部，这将导致：
<h1>Heading <p>paragraph</p> </h1>

而insertAfter元素后增加了elemet：

<h1>Heading</h1> <p>paragraph</p> 

这就是为什么你会得到更大的字体 - 这是H1内进行处理作为h1这是错误的反正。只需使用插入后

Answer 3

appendTo将<p>纳入您的<h1>元素。由于它位于<h1>的内部，因此它将成为标题标记的子标记，并将继承其CSS属性。

insertAfter在之后插入<p>右<h1>元件。它不是小孩，所以它不会继承<h1>中的任何CSS属性。