如何获得新的jQuery元素，并在其后插入新的另一个元素？

Question

我有这个jQuery代码：

function test(){
    var $h=$('<h2>').text('title')
        $p=$('<p>').text('sample'),
        $result=$h.after($p);
    return $result;
}

我希望当我在页面中显示$result时，它会是：

<h2>title</h2><p>sample</p>

但它是：

<h2>title</h2>

如何更改代码以解决此问题？

EDIT1： 我想通过调用test()函数返回此结果，我不会在函数中使用任何parnet元素或作为参数。真的，我想要返回这个jQuery元素集合！

Answer 1

这应该有效

var $h = $('<h2>'),
    $p = $('<p>');
$h.text('title');
$p.text('sample');
$('body').append($h);
$h.after($p);

首先声明你的元素，然后设置他们的文本，然后按顺序在DOM中附加所有内容。

https://jsfiddle.net/jhjoorbc/

修改

如果要从函数返回新创建的对象，必须首先为两个<h2>和<p>兄弟创建父对象，然后返回该对象。

function text(){
    var $h = $('<h2>'),
        $p = $('<p>'),
        $container = $('<div>');
    $h.text('title');
    $p.text('sample');
    $container.append($h).append($p);
    return $container;
}