Question

使用jQuery在h1之后插入p标签我从两个不同的方法获得不同的字体大小appendTo（）和insertAfter（）

$('<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，这是错误的。只需使用insertAfter

Answer 3

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

insertAfter在<p>元素之后插入<h1>右。它不是孩子，因此它不会从<h1>继承任何CSS属性。

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

3 个答案: