jQuery

通过 jQuery，可以很容易地添加新元素/内容。

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

jQuery append() 方法

jQuery append() 方法在被选元素的结尾插入内容。

实例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js">
 5 </script>
 6 <script>
 7 $(document).ready(function(){
 8   $("#btn1").click(function(){
 9     $("p").append(" <b>Appended text</b>.");
10   });
11 
12   $("#btn2").click(function(){
13     $("ol").append("<li>Appended item</li>");
14   });
15 });
16 </script>
17 </head>
18 
19 <body>
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 <button id="btn1">追加文本</button>
28 <button id="btn2">追加列表项</button>
29 </body>
30 </html>

View Code

查看结果:

默认：　　　　　　　　　　　　　　　　　　　追加文本：　　　　　　　　　　　　　　　　　　　　　　追加列表：

jQuery prepend() 方法

jQuery prepend() 方法在被选元素的开头插入内容。

实例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script>
 6 $(document).ready(function(){
 7   $("#btn1").click(function(){
 8     $("p").prepend("<b>Prepended text</b>. ");
 9   });
10   $("#btn2").click(function(){
11     $("ol").prepend("<li>Prepended item</li>");
12   });
13 });
14 </script>
15 </head>
16 <body>
17 
18 <p>This is a paragraph.</p>
19 <p>This is another paragraph.</p>
20 <ol>
21 <li>List item 1</li>
22 <li>List item 2</li>
23 <li>List item 3</li>
24 </ol>
25 
26 <button id="btn1">添加文本</button>
27 <button id="btn2">添加列表项</button>
28 
29 </body>
30 </html>

View Code

查看结果:

默认：　　　　　　　　　　　　　　　　　　　　　　点击追加：

通过 append() 和 prepend() 方法添加若干新元素

在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。

不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

实例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script>
 6 function appendText()
 7 {
 8 var txt1="<p>Text.</p>";              // 以 HTML 创建新元素
 9 var txt2=$("<p></p>").text("Text.");  // 以 jQuery 创建新元素
10 var txt3=document.createElement("p");
11 txt3.innerHTML="Text.";               // 通过 DOM 来创建文本
12 $("body").append(txt1,txt2,txt3);        // 追加新元素
13 }
14 </script>
15 </head>
16 <body>
17 
18 <p>This is a paragraph.</p>
19 <button onclick="appendText()">追加文本</button>
20 
21 </body>
22 </html>

View Code

查看结果:

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

实例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script>
 6 $(document).ready(function(){
 7   $("#btn1").click(function(){
 8     $("img").before("<b>Before</b>");
 9   });
10 
11   $("#btn2").click(function(){
12     $("img").after("<i>After</i>");
13   });
14 });
15 </script>
16 </head>
17 
18 <body>
19 <img src="/i/eg_w3school.gif" alt="W3School Logo" />
20 <br><br>
21 <button id="btn1">在图片前面添加文本</button>
22 <button id="btn2">在图片后面添加文本</button>
23 </body>
24 </html>

View Code

查看结果:

通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

实例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script>
 6 function afterText()
 7 {
 8 var txt1="<b>I </b>";                    // 以 HTML 创建元素
 9 var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建元素
10 var txt3=document.createElement("big");  // 通过 DOM 创建元素
11 txt3.innerHTML="jQuery!";
12 $("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素
13 }
14 </script>
15 </head>
16 <body>
17 
18 <img src="/i/eg_w3school.gif" alt="W3School Logo" />
19 <br><br>
20 <button onclick="afterText()">在图片后面添加文本</button>
21 
22 </body>
23 </html>

View Code