我是这样理解的：

第一个例子：内部插入

<div class="content"></div>

$(".content").append('<div class="append">通过append方法添加的元素</div>')
此时content是append的父类；反之亦然。

第二个例子：外部插入

<div class="aaron">
    <p class="test1">测试before</p>
</div>

$(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')

此时test1类前叫一个P标签；这两个是同级关系

外部插入就更精准吧！

<div id=div1>这是第一个div</div> 

//用内部插入 。

$('#div1').append('<div id=div2>这是第二个div</div>');

结果是在div1中 添加子元素。  此时div1是div2的父元素。

即：

<div id=div1>

    这是第一个div

    <div id=div2>

        这是第二个div

    </div>

</div>

//用外部插入。

结果是<div id=div1>这是第一个div</div>

        <div id=div2>这是第二个div</div>

这俩个div是兄弟级关系

结果都是一样的，就是语法不一样而已

不是吧，一个是在div里面在放一个div,还有一个是在div后面或前面放一个并列的div

一样，你可以试试看啊

举一个例子：

<div id="div1">
    <div id="div2">
        <div id="div3">
        </div>
    </div>
</div>

这是一个三层嵌套的div，现在插入元素，看看你想在哪里插入，比如给第二个元素插入一个兄弟元素，用内部插入的方法：$('#div1').append('<div id="div2_1">和div2是并列的关系</div>')，那么同样可以用外部插入的方法：$(<div id="div2_1">和div2是并列的关系</div>).insertAfter('#div3')；注意用append()和insertAfter/Before()的格式的区别，学习这些东西要的是多动手，你可以用这些方法，拿几个html页面做做试验，然后印象就深刻了。