1

使用 jQuery 在 h1 之后插入 ap 标签我从两种不同的方法 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，这里发生了什么？

4

3 回答 3

3

答案在于每个操作产生的 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>样式不受影响。

于 2013-06-24T03:49:18.643 回答
0

appendTo 表示放在里面，这将导致：
<h1>Heading <p>paragraph</p> </h1>

而 insertAfter 在元素之后添加 elemet：

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

这就是为什么你会得到更大的字体 - 它在 h1 内并被视为 h1 无论如何都是错误的。只需使用 insertAfter

于 2013-06-24T03:49:36.970 回答
0

appendTo放入你的<p> 元素<h1>。由于它在 内部<h1>，因此它成为标题标签的子标签，并将继承其 CSS 属性。

insertAfter在元素之后插入<p>右边。它不是一个孩子，所以它不会从.<h1><h1>

于 2013-06-24T03:50:10.997 回答