jQuery 入门教程(14): 添加HTML元素

来源：互联网发布：ipad pro 保护套知乎编辑：程序博客网时间：2024/05/16 08:33

使用jQuery可以方便的添加新的HTML元素。
下面的方法用于添加HTML元素：

append() – 在指定的元素的尾部添加一个新内容。
prepend() -在指定的元素里前部添加新内容。
after() – 在指定元素后添加新内容
before() -在指定元素的前面添加新内容。

乍一看append,prepend 和after,before似乎功能一样，但append,prepend指在选中的元素本身（内部）的前面和后面，而after,before指在选择中的元素的前面和后面。

可以参考下面的append例子：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>JQuery Demo</title>    <script src="scripts/jquery-1.9.1.js"></script>    <script>        $(document).ready(function () {            $("#btn1").click(function () {                $("p").append(" <b>Appended text</b>.");            });            $("#btn2").click(function () {                $("ol").append("<li>Appended item</li>");            });        });    </script></head><body>    <p>This is a paragraph.</p>    <p>This is another paragraph.</p>    <ol>        <li>List item 1</li>        <li>List item 2</li>        <li>List item 3</li>    </ol>    <button id="btn1">Append text</button>    <button id="btn2">Append list items</button></body></html>

20130309002

prepend示例：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>JQuery Demo</title>    <script src="scripts/jquery-1.9.1.js"></script>    <script>        $(document).ready(function () {            $("#btn1").click(function () {                $("p").prepend("<b>Prepended text</b>. ");            });            $("#btn2").click(function () {                $("ol").prepend("<li>Prepended item</li>");            });        });    </script></head><body>    <p>This is a paragraph.</p>    <p>This is another paragraph.</p>    <ol>        <li>List item 1</li>        <li>List item 2</li>        <li>List item 3</li>    </ol>    <button id="btn1">Prepend text</button>    <button id="btn2">Prepend list item</button></body></html>

20130309003

append(),prepend()支持同时插入多个元素，下面的例子添加三个使用不同方法创建的新元素：

function appendText() { // Create element with HTML var txt1="<p>Text.</p>";// Create with jQuery var txt2=$("<p></p>").text("Text."); // Create with DOM var txt3=document.createElement("p"); txt3.innerHTML="Text."; // Append the new elements $("p").append(txt1,txt2,txt3); }

下面的例子使用after,before 在指定的元素前后面添加新内容：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>JQuery Demo</title>    <script src="scripts/jquery-1.9.1.js"></script>    <script>        $(document).ready(function () {            $("#btn1").click(function () {                $("img").before("<b>Before</b>");            });            $("#btn2").click(function () {                $("img").after("<i>After</i>");            });        });    </script></head><body>    <img src="/images/guidebee.png"        alt="guidebee" width="120" height="125">    <br>    <br>    <button id="btn1">Insert before</button>    <button id="btn2">Insert after</button></body></html>

同样after,before也支持同时插入多个元素：

function afterText() {  // Create element with HTML  var txt1="<b>I </b>";   // Create with jQuery  var txt2=$("<i></i>").text("love ");   // Create with DOM  var txt3=document.createElement("big");   txt3.innerHTML="jQuery!";  // Insert new elements after img $("img").after(txt1,txt2,txt3);          }