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

访客 阅读:171 2021-04-01 10:00:03 评论:0


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

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

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

可以参考下面的append例子:

  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

prepend示例:

  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

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

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

  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 同样after,before也支持同时插入多个元素:

  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.  }  
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

一个IT知识分享的公众号