jQuery插入元素

7,344字

31–47 分钟

jQuery插入元素是jQuery HTML元素操作的核心功能之一，指通过jQuery提供的专用方法，在指定DOM元素的不同位置插入新元素或已有元素，无需手动操作DOM节点，大幅简化原生JavaScript插入元素的繁琐代码。jQuery插入元素方法分为内部插入与外部插入两大类，各类方法定位精准、用法灵活，是实现页面动态渲染的关键手段，熟练掌握jQuery插入元素方法，能有效提升前端页面开发效率。

内部插入

内部插入是jQuery插入元素的重要分类，指将目标元素插入到指定父元素的内部，根据插入位置的不同，分为末尾插入与开头插入两种场景，对应append()、prepend()、appendTo()、prependTo()四种核心方法，四种方法功能互补，覆盖内部插入的所有常用场景。

append()方法

append()方法用于将目标元素插入到指定父元素的内部末尾位置，即父元素现有内容的最后面，插入后目标元素成为父元素的最后一个子元素，是jQuery插入元素中最常用的内部末尾插入方法。

语法

// 将内容插入到指定元素内部末尾
$(selector).append(content);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery append()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .parent { border: 2px solid #000; padding: 10px; margin: 10px 0; }
        .new-item { background-color: #e6f7ff; padding: 5px; margin: 5px 0; }
    </style>
</head>
<body>
    <div class="parent" id="target">
        <div>现有子元素1</div>
        <div>现有子元素2</div>
    </div>

    <script>
        // 插入新创建的元素
        $("#target").append("<div class='new-item'>append插入的新元素</div>");

        // 插入页面中已有的元素
        var existingElem = $("<div class='new-item'>插入已有的元素</div>");
        $("#target").append(existingElem);
    </script>
</body>
</html>

prepend()方法

prepend()方法与append()方法相对应，用于将目标元素插入到指定父元素的内部开头位置，即父元素现有内容的最前面，插入后目标元素成为父元素的第一个子元素，是jQuery插入元素中常用的内部开头插入方法。

语法

// 将内容插入到指定元素内部开头
$(selector).prepend(content);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery prepend()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .parent { border: 2px solid #000; padding: 10px; margin: 10px 0; }
        .new-item { background-color: #fff2e6; padding: 5px; margin: 5px 0; }
    </style>
</head>
<body>
    <div class="parent" id="target">
        <div>现有子元素1</div>
        <div>现有子元素2</div>
    </div>

    <script>
        // 插入新创建的元素
        $("#target").prepend("<div class='new-item'>prepend插入的新元素</div>");

        // 插入页面中已有的元素
        var existingElem = $("<div class='new-item'>插入已有的元素</div>");
        $("#target").prepend(existingElem);
    </script>
</body>
</html>

appendTo()方法

appendTo()方法与append()方法功能一致，均用于将目标元素插入到指定父元素的内部末尾位置，区别在于语法结构不同，appendTo()方法将目标元素作为调用主体，父元素作为参数传入，是jQuery插入元素中语法灵活的内部末尾插入方法。

语法

// 将调用主体元素插入到指定父元素内部末尾
$(content).appendTo(selector);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery appendTo()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .parent { border: 2px solid #000; padding: 10px; margin: 10px 0; }
        .new-item { background-color: #e6f7ff; padding: 5px; margin: 5px 0; }
    </style>
</head>
<body>
    <div class="parent" id="target">
        <div>现有子元素1</div>
        <div>现有子元素2</div>
    </div>

    <script>
        // 新创建元素插入到父元素内部末尾
        $("<div class='new-item'>appendTo插入的新元素</div>").appendTo("#target");

        // 已有的元素插入到父元素内部末尾
        var existingElem = $("<div class='new-item'>插入已有的元素</div>");
        existingElem.appendTo("#target");
    </script>
</body>
</html>

prependTo()方法

prependTo()方法与prepend()方法功能一致，均用于将目标元素插入到指定父元素的内部开头位置，语法结构与appendTo()方法对应，将目标元素作为调用主体，父元素作为参数传入，是jQuery插入元素中语法灵活的内部开头插入方法。

语法

// 将调用主体元素插入到指定父元素内部开头
$(content).prependTo(selector);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery prependTo()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .parent { border: 2px solid #000; padding: 10px; margin: 10px 0; }
        .new-item { background-color: #fff2e6; padding: 5px; margin: 5px 0; }
    </style>
</head>
<body>
    <div class="parent" id="target">
        <div>现有子元素1</div>
        <div>现有子元素2</div>
    </div>

    <script>
        // 新创建元素插入到父元素内部开头
        $("<div class='new-item'>prependTo插入的新元素</div>").prependTo("#target");

        // 已有的元素插入到父元素内部开头
        var existingElem = $("<div class='new-item'>插入已有的元素</div>");
        existingElem.prependTo("#target");
    </script>
</body>
</html>

外部插入

外部插入是jQuery插入元素的另一重要分类，指将目标元素插入到指定元素的外部，根据插入位置的不同，分为元素后面插入与元素前面插入两种场景，对应after()、before()、insertAfter()、insertBefore()四种核心方法，与内部插入方法形成互补，覆盖所有插入元素场景。

after()方法

after()方法用于将目标元素插入到指定元素的外部后面位置，即指定元素的紧邻下方，插入后目标元素与指定元素为同级兄弟关系，是jQuery插入元素中常用的外部后面插入方法。

语法

// 将内容插入到指定元素外部后面
$(selector).after(content);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery after()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .box { border: 1px solid #000; padding: 10px; margin: 5px 0; }
        .new-box { background-color: #e6f7ff; }
    </style>
</head>
<body>
    <div class="box" id="target">指定元素</div>

    <script>
        // 插入新创建的元素
        $("#target").after("<div class='box new-box'>after插入的新元素</div>");

        // 插入已有的元素
        var existingElem = $("<div class='box new-box'>插入已有的元素</div>");
        $("#target").after(existingElem);
    </script>
</body>
</html>

before()方法

before()方法与after()方法相对应，用于将目标元素插入到指定元素的外部前面位置，即指定元素的紧邻上方，插入后目标元素与指定元素为同级兄弟关系，是jQuery插入元素中常用的外部前面插入方法。

语法

// 将内容插入到指定元素外部前面
$(selector).before(content);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery before()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .box { border: 1px solid #000; padding: 10px; margin: 5px 0; }
        .new-box { background-color: #fff2e6; }
    </style>
</head>
<body>
    <div class="box" id="target">指定元素</div>

    <script>
        // 插入新创建的元素
        $("#target").before("<div class='box new-box'>before插入的新元素</div>");

        // 插入已有的元素
        var existingElem = $("<div class='box new-box'>插入已有的元素</div>");
        $("#target").before(existingElem);
    </script>
</body>
</html>

insertAfter()方法

insertAfter()方法与after()方法功能一致，均用于将目标元素插入到指定元素的外部后面位置，区别在于语法结构不同，insertAfter()方法将目标元素作为调用主体，指定元素作为参数传入，是jQuery插入元素中语法灵活的外部后面插入方法。

语法

// 将调用主体元素插入到指定元素外部后面
$(content).insertAfter(selector);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery insertAfter()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .box { border: 1px solid #000; padding: 10px; margin: 5px 0; }
        .new-box { background-color: #e6f7ff; }
    </style>
</head>
<body>
    <div class="box" id="target">指定元素</div>

    <script>
        // 新创建元素插入到指定元素外部后面
        $("<div class='box new-box'>insertAfter插入的新元素</div>").insertAfter("#target");

        // 已有的元素插入到指定元素外部后面
        var existingElem = $("<div class='box new-box'>插入已有的元素</div>");
        existingElem.insertAfter("#target");
    </script>
</body>
</html>

insertBefore()方法

insertBefore()方法与before()方法功能一致，均用于将目标元素插入到指定元素的外部前面位置，语法结构与insertAfter()方法对应，将目标元素作为调用主体，指定元素作为参数传入，是jQuery插入元素中语法灵活的外部前面插入方法。

语法

// 将调用主体元素插入到指定元素外部前面
$(content).insertBefore(selector);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery insertBefore()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .box { border: 1px solid #000; padding: 10px; margin: 5px 0; }
        .new-box { background-color: #fff2e6; }
    </style>
</head>
<body>
    <div class="box" id="target">指定元素</div>

    <script>
        // 新创建元素插入到指定元素外部前面
        $("<div class='box new-box'>insertBefore插入的新元素</div>").insertBefore("#target");

        // 已有的元素插入到指定元素外部前面
        var existingElem = $("<div class='box new-box'>插入已有的元素</div>");
        existingElem.insertBefore("#target");
    </script>
</body>
</html>