爲什麼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屬性。