Jquery 添加元素
1. 介绍¶
通过 jQuery,可以很容易地添加新元素/内容。
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
2.案例¶
2.1 append¶
jQuery append() 方法在被选元素的结尾插入内容(仍然该元素的内部)。
append
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>caimengzhi blog jquery</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <p>原始数据</p> <ol> <li>第一行</li> <li>第二行</li> </ol> <button id="btn1">添加文本</button> <button id="btn2">添加行</button> </body> <script> $(function () { $('#btn1').click(function () { $('p').append("<b style='color: red;'> 后面追加数据 </b>") }); $('#btn2').click(function () { $('ol').append("<li>新添加列</li>") }) }) </script> </html>
2.2 prepend¶
jQuery prepend() 方法在被选元素的开头插入内容。
prepend
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>caimengzhi blog jquery</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <p>原始数据</p> <ol> <li>第一行</li> <li>第二行</li> </ol> <button id="btn1">添加文本</button> <button id="btn2">添加行</button> </body> <script> $(function () { $('#btn1').click(function () { $('p').prepend("<b style='color: red;'> 后面追加数据 </b>") }); $('#btn2').click(function () { $('ol').prepend("<li>新添加列</li>") }) }) </script> </html>
2.3 批量插入¶
在上面的例子中,我们只在被选元素的开头/结尾插入文本/HTML。
不过,append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素。
在下面的例子中,我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中(对 prepend() 同样有效):
批量插入
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>caimengzhi blog jquery</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <p>这是一个段落。</p> <button onclick="appendText()">追加文本</button> <button onclick="prependText()">追加文本</button> </body> <script> function appendText(){ var txt1="<p>appendText1文本。</p>"; // 使用 HTML 标签创建文本 var txt2=$("<p></p>").text("appendText2文本。"); // 使用 jQuery 创建文本 var txt3=document.createElement("p"); txt3.innerHTML="appendText3文本。"; // 使用 DOM 创建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素 }; function prependText(){ var txt1="<p>prependText1文本。</p>"; // 使用 HTML 标签创建文本 var txt2=$("<p></p>").text("prependText2文本。"); // 使用 jQuery 创建文本 var txt3=document.createElement("p"); txt3.innerHTML="prependText3文本。"; // 使用 DOM 创建文本 text with DOM $("body").prepend(txt1,txt2,txt3); // 追加新元素 } </script> </html>
2.4 after¶
jQuery after() 方法在被选元素之后插入内容。
after
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>caimengzhi blog jquery</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <h3>这是一个段落。</h3> <p>这是一个段落。</p> <h3>这是一个段落。</h3> <button id="btn2">之后插入</button> </body> <script> $(function () { $('#btn2').click(function () { $('p').after("<i>after helo cmz! </i>") }); }) </script> </html>
2.5 before¶
jQuery before() 方法在被选元素之前插入内容。
before
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>caimengzhi blog jquery</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <h3>这是一个段落。</h3> <p>这是一个段落。</p> <h3>这是一个段落。</h3> <button id="btn1">之前插入</button> </body> <script> $(function () { $('#btn1').click(function () { $('p').before("<b>before helo cmz! </b>") }); }) </script> </html>
2.6 批量插入¶
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中,我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中(对 before() 同样有效):
批量插入
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>caimengzhi blog jquery</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <h3>这是一个段落。</h3> <p>这是一个段落。</p> <h3>这是一个段落。</h3> <button onclick="afterText()">之后插入</button> <button onclick="beforeText()">之前插入</button> </body> <script> function afterText(){ var txt1="<b>I </b>"; // 使用 HTML 创建元素 var txt2=$("<i></i>").text("love "); // 使用 Python 创建元素 var txt3=document.createElement("big"); // 使用 DOM 创建元素 txt3.innerHTML="Python!"; $("p").after(txt1,txt2,txt3); // 在图片后添加文本 }; function beforeText(){ var txt1="<b>I </b>"; // 使用 HTML 创建元素 var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素 var txt3=document.createElement("big"); // 使用 DOM 创建元素 txt3.innerHTML="jQuery!"; $("p").before(txt1,txt2,txt3); // 在图片后添加文本 } </script> </html>
对比
append/prepend 是在选择元素内部嵌入。 after/before 是在元素外面追加。