前言:
现时同学们对“jquery 移出元素”大致比较珍视,咱们都需要学习一些“jquery 移出元素”的相关资讯。那么小编也在网摘上网罗了一些关于“jquery 移出元素””的相关知识,希望小伙伴们能喜欢,姐妹们快快来了解一下吧!本节我们学习如何使用 jQuery 中的方法来添加和删除 HTML 元素。
jQuery 中用于添加 HTML 元素的方法有如下几种:
方法
描述
append()
在所选元素的末尾插入内容
prepend()
在选定元素的开头插入内容
after()
在选定元素后插入内容
before()
在选定元素之前插入内容
而用于删除元素的方法有:
方法
描述
remove()
删除被选元素容,包括子元素
empty()
删除被选元素的所有子节点和内容
append()方法
append() 方法可以在指定元素的末尾插入内容。
语法如下:
$(selector).append(content,function(index,html))content:规定要插入的内容,可以包含 HTML 元素、jQuery 对象、DOM 元素。function(index,html):规定返回待插入内容的函数,index 为集合中元素的索引位置,html 为被选元素的当前 HTML。示例:
我们来看下面这个例子:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_侠课岛(9xkd.com)</title><script src="jquery-3.5.1.min.js"></script><script> $(function(){ $("button").click(function(){ $("p").append("侠课岛"); }); });</script></head><body> <p>你好,我的名字叫做:</p> <button>点击追加文本</button></body></html>
点击按钮,在指定的 <p> 标签末尾添加文本内容 “侠课岛”,我们可以在浏览器中看一下演示结果:
除了文本内容,我们还可以在元素中添加 HTML :
<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_侠课岛(9xkd.com)</title><script src="jquery-3.5.1.min.js"></script><script> $(function(){ $("button").click(function(){ $("ul").append("<li>strawberry</li>"); }); });</script></head><body> <ul> <li>apple</li> <li>pear</li> <li>peach</li> <li>watermelon</li> </ul> <button>点击追加文本</button></body></html>
在浏览器中的演示结果:
prepend()方法
prepend() 方法其实和 append() 方法类似,语法也差不多。但是 prepend() 方法主要用于在被选元素的开头插入指定内容。
语法如下:
$(selector).prepend(content,function(index,html))示例:
我们将上述示例中的 append() 方法改成 prepend() 方法:
$(function(){ $("button").click(function(){ $("ul").prepend("<li>strawberry</li>"); });});
然后看一下在浏览器中的演示结果:
after()方法
after() 方法用于在被选元素后插入指定的内容。看起来 after() 方法和 append() 方法的作用好像差不多,但是其实两个方法还是有区别的。 append() 方法是在被选元素的结尾插入内容,插入的内容仍然在元素内部。而 after() 插入的内容会重新起一行,与被选择的元素并没有什么逻辑上的联系。
示例:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_侠课岛(9xkd.com)</title><script src="jquery-3.5.1.min.js"></script><script> $(function(){ $("button").click(function(){ $("p").after("<p>侠课岛</p>"); }); });</script></head><body> <p>你好,我的名字叫做:</p> <button>点击追加文本</button></body></html>
在浏览器中的演示效果:
before()方法
before() 方法用于在被选元素之前插入指定的内容。它和 prepend() 方法的区别在于一个在被选元素内插入内容,一个在被选元素外。
注意 before() 方法和 after() 方法都是在被选元素外插入内容。append() 和 prepend() 方法都是在被选元素内插入内容。
示例:
例如将上述示例中的方法改为 before:
$(function(){ $("button").click(function(){ $("p").before("<p>侠课岛</p>"); });});
在浏览器中的演示效果:
remove()方法
remove() 方法用于删除被选元素及其子元素。该方法也会删除被选元素的数据和事件。
示例:
例如下面这个例子:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_侠课岛(9xkd.com)</title><script src="jquery-3.5.1.min.js"></script><script> $(function(){ $("button").click(function(){ $("p").remove(); }); });</script></head><body> <p>你好,欢迎来到侠课岛!</p> <button>点击删除</button></body></html>
在浏览器中的演示效果:
从上图中可以看到,remove() 方法将指定的 p 元素连标签带元素全部删除。
empty()方法
empty() 方法用于删除被选元素的所有子节点和内容。该方法不会移除元素本身,或它的属性。
示例:
我们讲上述示例中的 remove() 方法改为empty() 方法,看看有什么不同:
$(function(){ $("button").click(function(){ $("p").empty(); });});
在浏览器中的演示效果:
可以看到 empty() 方法只会删除指定元素中的内容,不会删除元素本身,当然如果元素上有属性,属性也不会被删除,大家可以自己试一下。
标签: #jquery 移出元素