在html页面中，我们可以使用 jquery 将新增的元素添加到指定元素的指定位置。这个位置可以在元素的内部和外部，而对于内外位置，又可以在元素的前面和后面。

    一、内部插入

    1.1 append()

        append()方法可以在 目标元素内部 的 尾部 插入元素，插入的元素作为最后一个子元素。举例如下：        

<!doctype html>
<html>
<head>
    <title>元素插入</title>
    <meta charset="utf-8">
    <script src="plugins/jquery/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h2>元素插入</h2>
<ul class="container">
    <li>第一个元素</li>
    <li>第二个元素</li>
</ul>
<script type="text/javascript">
    // 在目标元素内部最后附加一个元素
    $(function () {
        $(".container").append('<li style="color:red">第三个元素</li>');
    })
</script>
</body>
</html>


        运行效果如下（在ul内部的尾部添加了一个新的元素）：

    

jQuery在标签最前面添加元素 jquery在元素后面添加_javascript

    1.2 appendTo()

        appendTo()方法将匹配元素插入到 目标元素 内部 的尾部。与append()方法操作相反。


<!doctype html>
<html>
<head>
    <title>元素插入</title>
    <meta charset="utf-8">
    <script src="plugins/jquery/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h2>元素插入</h2>
<ul class="container">
    <li>第一个元素</li>
    <li>第二个元素</li>
</ul>
<script type="text/javascript">
    // 在目标元素内部最后附加一个元素
    $(function () {
        // $(".container").append('<li style="color:red">第三个元素</li>');

        $('<li style="color:red">第三个元素</li>').appendTo(".container");
    })
</script>
</body>
</html>


        以上代码的运行效果和1.1相同。

    1.3 prepend()

        prepend()方法在目标元素内部的最前面插入指定的元素，并返回一个jQuery对象。指定的元素被插入到每个匹配元素里面的最前面，作为它的第一个子元素。


<!doctype html>
<html>
<head>
    <title>元素插入</title>
    <meta charset="utf-8">
    <script src="plugins/jquery/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h2>元素插入</h2>
<ul class="container">
    <li>第一个元素</li>
    <li>第二个元素</li>
</ul>
<script type="text/javascript">
    // 在目标元素内部最前面插入一个元素
    $(function () {
        $(".container").prepend('<li style="color:red">第0个元素</li>');
    })
</script>
</body>
</html>


        以上代码的运行效果：

    

jQuery在标签最前面添加元素 jquery在元素后面添加_javascript_02

    1.4 prependTo()

        prependTo()方法将指定元素插入到 目标元素 内部 的最前面。与prepend()方法操作相反。


<!doctype html>
<html>
<head>
    <title>元素插入</title>
    <meta charset="utf-8">
    <script src="plugins/jquery/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h2>元素插入</h2>
<ul class="container">
    <li>第一个元素</li>
    <li>第二个元素</li>
</ul>
<script type="text/javascript">
    // 在目标元素内部最前面插入一个元素
    $(function () {
        // $(".container").prepend('<li style="color:red">第0个元素</li>');
        $('<li style="color:red">第0个元素</li>').prependTo(".container");
    })
</script>
</body>
</html>


        以上代码的运行效果和1.3相同。   

    二、外部插入

     2.1 after()

        after()方法在目标元素 外部 的 后面 插入指定元素。


<!doctype html>
<html>
<head>
    <title>元素插入</title>
    <meta charset="utf-8">
    <script src="plugins/jquery/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h2>元素插入</h2>
<ul class="container">
    <li class="first">第一个元素</li>
    <li>第二个元素</li>
</ul>
<script type="text/javascript">
    // 在目标元素外部后面插入一个元素
    $(function () {
        $(".first").after('<li style="color:red">我是插入的元素</li>');
    })
</script>
</body>
</html>


        以上代码的运行效果：

    

jQuery在标签最前面添加元素 jquery在元素后面添加_jQuery在标签最前面添加元素_03

 

     2.2 insertAfter()

        insertAfter()方法将 指定元素 插入到 目标元素 外部 的后面。与after()方法操作相反。


<!doctype html><html>
<head>
    <title>元素插入</title>
    <meta charset="utf-8">
    <script src="plugins/jquery/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h2>元素插入</h2>
<ul class="container">
    <li class="first">第一个元素</li>
    <li>第二个元素</li>
</ul>
<script type="text/javascript">
    // 在目标元素外部后面插入一个元素
    $(function () {
        // $(".first").after('<li style="color:red">我是插入的元素</li>');
        $('<li style="color:red">我是插入的元素</li>').insertAfter(".first");
    })
</script>
</body>
</html>


        以上代码的运行效果和2.1相同。

     2.3 before()

        before()方法在目标元素 外部 的 前面 插入指定元素。


<!doctype html><html>
<head>
    <title>元素插入</title>
    <meta charset="utf-8">
    <script src="plugins/jquery/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h2>元素插入</h2>
<ul class="container">
    <li class="first">第一个元素</li>
    <li>第二个元素</li>
</ul>
<script type="text/javascript">
    // 在目标元素外部前面插入一个元素
    $(function () {
        $(".first").before('<li style="color:red">我是插入的元素</li>');
    })
</script>
</body>
</html>


        以上代码的运行效果：

    

jQuery在标签最前面添加元素 jquery在元素后面添加_html_04

     2.4 insertBefore()

        insertBefore()方法将 指定元素 插入到 目标元素 外部 的后面。与before()方法操作相反。


<!doctype html><html>
<head>
    <title>元素插入</title>
    <meta charset="utf-8">
    <script src="plugins/jquery/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h2>元素插入</h2>
<ul class="container">
    <li class="first">第一个元素</li>
    <li>第二个元素</li>
</ul>
<script type="text/javascript">
    // 在目标元素外部前面插入一个元素
    $(function () {
        // $(".first").before('<li style="color:red">我是插入的元素</li>');
        $('<li style="color:red">我是插入的元素</li>').insertBefore(".first");
    })
</script>
</body>
</html>


        以上代码的运行效果和2.3相同。