jQuery - 添加元素

用于添加新内容的四个 jQuery 方法:

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

 1 $("p").append("Some appended text."); 

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

 1 $("p").prepend("Some prepended text."); 

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

1 $("img").after("Some text after");

2 $("img").before("Some text before"); 

append() 和 prepend() after() 和 before()方法能够通过参数接收无限数量的新元素。

可以通过 jQuery 来生成文本/HTML,或者通过 JavaScript 代码和 DOM 元素。

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

 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 $("p").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>

 

你可能感兴趣的:(jQuery - 添加元素)