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

谁借莪１个温暖的怀抱￠ 2023-10-16 19:04 23阅读 0赞

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

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

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

可以参考下面的append例子：

**\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.  <meta charset="utf-8">
5.  <title>JQuery Demo</title>
6.  <script src="scripts/jquery-1.9.1.js"></script>
7.  <script>
8.  $(document).ready(function () \{
9.  $("\#btn1").click(function () \{
10. $("p").append(" <b>Appended text</b>.");
11. \});
12. 
13. $("\#btn2").click(function () \{
14. $("ol").append("<li>Appended item</li>");
15. \});
16. \});
17. </script>
18. </head>
19. 
20. <body>
21. <p>This is a paragraph.</p>
22. <p>This is another paragraph.</p>
23. <ol>
24. <li>List item 1</li>
25. <li>List item 2</li>
26. <li>List item 3</li>
27. </ol>
28. <button id="btn1">Append text</button>
29. <button id="btn2">Append list items</button>
30. </body>
31. </html>

<!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][]][20130309002]

prepend示例：

**\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.  <meta charset="utf-8">
5.  <title>JQuery Demo</title>
6.  <script src="scripts/jquery-1.9.1.js"></script>
7.  <script>
8.  $(document).ready(function () \{
9.  $("\#btn1").click(function () \{
10. $("p").prepend("<b>Prepended text</b>. ");
11. \});
12. $("\#btn2").click(function () \{
13. $("ol").prepend("<li>Prepended item</li>");
14. \});
15. \});
16. </script>
17. </head>
18. <body>
19. 
20. <p>This is a paragraph.</p>
21. <p>This is another paragraph.</p>
22. <ol>
23. <li>List item 1</li>
24. <li>List item 2</li>
25. <li>List item 3</li>
26. </ol>
27. 
28. <button id="btn1">Prepend text</button>
29. <button id="btn2">Prepend list item</button>
30. 
31. </body>
32. </html>

<!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][]][20130309003]

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

**\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  function appendText()
2.  \{
3.  // Create element with HTML
4.  var txt1="<p>Text.</p>";
5.  // Create with jQuery
6.  var txt2=$("<p></p>").text("Text.");
7.  // Create with DOM
8.  var txt3=document.createElement("p");
9.  txt3.innerHTML="Text.";
10. // Append the new elements
11. $("p").append(txt1,txt2,txt3);
12. \}

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 在指定的元素前后面添加新内容：

**\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.  <meta charset="utf-8">
5.  <title>JQuery Demo</title>
6.  <script src="scripts/jquery-1.9.1.js"></script>
7.  <script>
8.  $(document).ready(function () \{
9.  $("\#btn1").click(function () \{
10. $("img").before("<b>Before</b>");
11. \});
12. 
13. $("\#btn2").click(function () \{
14. $("img").after("<i>After</i>");
15. \});
16. \});
17. </script>
18. </head>
19. 
20. <body>
21. <img src="/images/guidebee.png"
22. alt="guidebee" width="120" height="125">
23. <br>
24. <br>
25. <button id="btn1">Insert before</button>
26. <button id="btn2">Insert after</button>
27. </body>
28. </html>

<!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>

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

**\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  function afterText()
2.  \{
3.  // Create element with HTML
4.  var txt1="<b>I </b>";
5.  // Create with jQuery
6.  var txt2=$("<i></i>").text("love ");
7.  // Create with DOM
8.  var txt3=document.createElement("big");
9.  txt3.innerHTML="jQuery!";
10. // Insert new elements after img
11. $("img").after(txt1,txt2,txt3);
12. \}

[view plain]: http://blog.csdn.net/mapdigit/article/details/8671295#
[20130309002]: http://www.imobilebbs.com/wordpress/wp-content/uploads/2013/03/20130309002.png
[20130309003]: http://www.imobilebbs.com/wordpress/wp-content/uploads/2013/03/20130309003.png
[20130309004]: http://www.imobilebbs.com/wordpress/wp-content/uploads/2013/03/20130309004.png