$("#bt2").on('click', function() {

        //在匹配test1元素集合中的每个元素后面插入p元

        var obj = document.getElementById('bt2');

        /*

        1 

        var $obj = $(obj);

        $(".test2").after($obj)

    $obj  这个是通过jQuery的$()方法转化而来的jQuery对象

        */

        /*

        2  $(".test2").after(obj)

obj 是通过document.getElementById(');方法获得的Dom元素

        */

        /*

        3  $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')

这个属于HTML字符串  '<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>'

        */

         总结 2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面

    });

建议还是多看css和js，这些是基础。

用  document.getElementById（）或者  htlm标签都是  Dom      用  $('标签')就是JQ对象   

var  a =  document.getElementById（'div'）这是dom      $a =  document.getElementById('id' ) dom 转jq对象   大概是这样