jQuery文档处理

内部插入

append(content|fn)

概述：向每个匹配的元素内部追加内容。

appendTo(content)

概述：把所有匹配的元素追加到另一个指定的元素元素集合中。

prepend(content|fn)

概述：向每个匹配的元素内部前置内容。

prependTo(content)

把所有匹配的元素前置到另一个、指定的元素元素集合中。

jQuery代码：

    $(function(){
            // 内部插入=>子元素
            // 所有子元素之后
            $(".append").click(function(){
                $("ul").append("<li>列表append</li>")
            })
            // 所有子元素之前
            $(".prepend").click(function(){
                $("ul").prepend("<li>列表append</li>")
            })
            $(".appendTo").click(function(){
                $("<li>列表append</li>").appendTo($("ul"))
            })
            $(".prependTo").click(function(){
                $("<li>列表append</li>").prependTo($("ul"))
            })
})

HTML代码：

<button type="button" class="append">append</button>
        <button type="button" class="prepend">prepend</button>
        <button type="button" class="appendTo">appendTo</button>
        <button type="button" class="prependTo">prependTo</button>

<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>

外部插入

after(content|fn)

概述：在每个匹配的元素之后插入内容。

before(content|fn)

概述：在每个匹配的元素之前插入内容。

insertAfter(content)

概述：把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

insertBefore(content)

概述：把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

jQuery代码

// 内部插入=>兄弟元素

$(".before").click(function(){
                $("ul").before("<div>外部元素添加在此元素外边之前</div>")
            })
            $(".after").click(function(){
                $("ul").after("<div>外部元素添加在此元素外边之后</div>")
            })
            $(".insertBefore").click(function(){
                $("<div>外部元素添加在此元素外边之前</div>").insertBefore($("ul"))
            })
            $(".insertAfter").click(function(){
                $("<div>外部元素添加在此元素外边之后</div>").insertAfter($("ul"))
            })

HTML代码

<button type="button" class="before">before</button>
        <button type="button" class="after">after</button>
        <button type="button" class="insertBefore">insertBefore</button>
        <button type="button" class="insertAfter">insertAfter</button>

<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>