小白教程
所有教程
关于
Search
172.69.59.164
172.69.59.164
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“JQuery 添加元素”的源代码
本页内容
上一节:
JQuery_设置内容和属性
下一节:
JQuery_删除元素
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:jQuery 添加元素}}[[Category:jQuery 教程|16]] = jQuery - 添加元素 = 通过 jQuery,可以很容易地添加新元素/内容。 == 添加新的 HTML 内容 == 我们将学习用于添加新内容的四个 jQuery 方法: * append() - 在被选元素的结尾插入内容 * prepend() - 在被选元素的开头插入内容 * after() - 在被选元素之后插入内容 * before() - 在被选元素之前插入内容 == jQuery append() 方法 == jQuery append() 方法在被选元素的结尾插入内容(仍然在该元素的内部)。 <sample title="" desc="" lang="html" hererun="1"> $("p").append("追加文本"); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").append(" <b>追加文本</b>。"); }); $("#btn2").click(function(){ $("ol").append("<li>追加列表项</li>"); }); }); </script> </head> <body> <p>这是一个段落。</p> <p>这是另外一个段落。</p> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <button id="btn1">添加文本</button> <button id="btn2">添加列表项</button> </body> </html> </run> == jQuery prepend() 方法 == jQuery prepend() 方法在被选元素的开头插入内容。 <sample title="" desc="" lang="html" hererun="1"> $("p").prepend("在开头追加文本"); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").prepend("<b>在开头追加文本</b>。 "); }); $("#btn2").click(function(){ $("ol").prepend("<li>在开头添加列表项</li>"); }); }); </script> </head> <body> <p>这是一个段落。</p> <p>这是另外一个段落。</p> <ol> <li>列表 1</li> <li>列表 2</li> <li>列表 3</li> </ol> <button id="btn1">添加文本</button> <button id="btn2">添加列表项</button> </body> </html> </run> == 通过 append() 和 prepend() 方法添加若干新元素 == 在上面的例子中,我们只在被选元素的开头/结尾插入文本/HTML。 不过,append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素。 在下面的例子中,我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中(对 prepend() 同样有效): <sample title="" desc="" lang="html" hererun="1"> function appendText(){ var txt1="<p>文本-1。</p>"; // 使用 HTML 标签创建文本 var txt2=$("<p></p>").text("文本-2。"); // 使用 jQuery 创建文本 var txt3=document.createElement("p"); txt3.innerHTML="文本-3。"; // 使用 DOM 创建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素 } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> function appendText(){ var txt1="<p>文本-1。</p>"; // 使用 HTML 标签创建文本 var txt2=$("<p></p>").text("文本-2。"); // 使用 jQuery 创建文本 var txt3=document.createElement("p"); txt3.innerHTML="文本-3。"; // 使用 DOM 创建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素 } </script> </head> <body> <p>这是一个段落。</p> <button onclick="appendText()">追加文本</button> </body> </html> </run> == jQuery after() 和 before() 方法 == jQuery after() 方法在被选元素之后插入内容。 jQuery before() 方法在被选元素之前插入内容。 <sample title="" desc="" lang="html" hererun="1"> $("img").after("在后面添加文本"); $("img").before("在前面添加文本"); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("img").before("<b>之前</b>"); }); $("#btn2").click(function(){ $("img").after("<i>之后</i>"); }); }); </script> </head> <body> <img src="/images/logo.png" > <br><br> <button id="btn1">之前插入</button> <button id="btn2">之后插入</button> </body> </html> </run> == 通过 after() 和 before() 方法添加若干新元素 == after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。 在下面的例子中,我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中(对 before() 同样有效): <sample title="" desc="" lang="html" hererun="1"> function afterText() { var txt1="<b>I </b>"; // 使用 HTML 创建元素 var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素 var txt3=document.createElement("big"); // 使用 DOM 创建元素 txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在图片后添加文本 } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> function afterText(){ var txt1="<b>I </b>"; // 使用 HTML 创建元素 var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素 var txt3=document.createElement("big"); // 使用 DOM 创建元素 txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在图片后添加文本 } </script> </head> <body> <img src="/images/logo2.png" > <br><br> <button onclick="afterText()">之后插入</button> </body> </html> </run>
返回至“
JQuery 添加元素
”。
上一节:
JQuery_设置内容和属性
下一节:
JQuery_删除元素