插入同辈节点

<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>

    <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(0).after(h1)

          /* 把h1插入到$('ul li:first')的后面 */

          h1.insertAfter($('ul li:first'))

        })

        /* 操作jq节点，方法传入的参数必须是jq对象节点 */

        // let li = $('<li>我是王牌助教龚助</li>')

        // /* 在.li2的后面插入jq节点 两者是同级 */

        // /* after方法不仅可以在后面插入新建的jq节点，也可以插入已存在的jq节点 */

        // // $('.li2').after(li);

        // // $('.li2').after($('a'));

        // /* $(A).inserAfter(B)表示将A插入到B之后 */

        // li.insertAfter('.li2')

        // $('.a').insertAfter('.li2')

        // /* after和inserAfter 写法不一样，实现效果一致 */

        // /* $(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>