JQuery插入同辈节点

HTML部分

<ul>
    <li>我是士兵1</li>
    <li class="li2">我是士兵2</li>
    <li>我是士兵3</li>
</ul>
<h1 class="a">我是王牌飞行员</h1>

<input type="text">
<br><br>
<button class="a1">点击把text的内容使用h1包裹插入到士兵1的前面</button>
<br><br>
<button class="a2">点击把text的内容使用h1包裹插入到士兵1的后面</button>

JS部分

<script src="./jquery-1.12.4.js"></script>
<script>
    /* 两种方法实现 */
    $('.a1').click(function(){
        let h1 = $(`<h1>${$('input').val()}</h1>`);
        /* 在$('ul li:first')的前面插入h1 */
        // $('ul li:first').before(h1)
        // $('ul li:eq(0)').before(h1)
        // $('ul li').eq(0).before(h1)
        // $('ul li').first().before(h1)
        /* 把h1插入到$('ul li:first')的前面 */
        h1.insertBefore( $('ul li:first') );
    })
    $('.a2').click(function(){
        let h1 = $(`<h1>${$('input').val()}</h1>`);
        /* 在$('ul li:first')的后面插入h1 */
        // $('ul li:first').after(h1)
        // $('ul li:eq(0)').after(h1)
        // $('ul li').eq(0).after(h1)
        // $('ul li').first().after(h1)
        /* 把h1插入到$('ul li:first')的后面 */
        h1.insertAfter( $('ul li:first') );
    })






    /* 操作jq节点，方法传入的参数必须是jq对象节点 */
    // let li = $('<li>我是123</li>');
    /* 在.li2的后面插入jq节点 两者是同级的 */
    /* after方法不仅可以在后面插入新建的jq节点，也可以插入已存在的jq节点 */
    // $('.li2').after(li);
    // $('.li2').after($('.a'));

    /* $(A). insertAfter (B)表示将A插入到B之后 */
    // li.insertAfter('.li2')
    // $('.a').insertAfter('.li2')
    /* after和insertAfter 写法不一样，实现效果一致 */

    /* $(A). before (B)表示将B插入至A之前 */
    // $('.li2').before(li)
    /* 因为.a不是同级元素，所以这里.a是需要用$包裹的  */
    // $('.li2').before($('.a'))

    /* $(A). insertBefore (B)表示将A插入到B之前 */
    // 以下两种写法都可以
    // li.insertBefore( $('.li2') )
    // li.insertBefore( '.li2' )
    
    // $('.a').insertBefore('.li2')


</script>