jQuery添加、删除元素

jQuery添加元素:

prepend()在头部添加，添加的内容在被选标签的内部
append()在尾部添加，添加的内容在被选标签的内部
before()在头部天际，添加的内容在被选标签的外部
after()在尾部添加，添加的内容在被选标签的外部
(重点是区分两种方法执行后结果的不同)
上代码:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script></head><body><p id="p1"> 文本体1 </p><p id="p2"> 文本体2 </p><ul><li>list1</li><li>list2</li><li>list3</li></ul><button id="btn1">append尾部</button><button id="btn3">prepend头部</button><button id="btn2">append追加列表</button><button id="btn4">before头部</button><button id="btn5">after尾部</button><script>$(document).ready(function(){$("#btn1").click(function(){$("#p1").append("<b>append</b>");$("#p2").append("<b>append</b>");});$("#btn2").click(function(){$("ul").append("<li>list4</li>");});$("#btn3").click(function(){$("#p1").prepend("<b>prepend</b>");$("#p2").prepend("<b>prepend</b>");});$("#btn4").click(function(){$("#p1").before("<b>before</b>");$("#p2").before("<b>before</b>");});$("#btn5").click(function(){$("#p1").after("<b>after</b>");$("#p2").after("<b>after</b>");});});</script></body>
</html>

jQuery删除元素:

remove()移除被选标签在内的所有元素，包括标签本身
- remove(参数)这里的参数是选择标签，例如$("div").remove("#p")表示只能移除div标签中子元素是p标签的元素
empty()清空被选标签的元素，即仅清除子元素
上代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script><title></title><style>div{margin:10px auto;padding:0 auto;width:200px;height:200px;background-color:yellow;border:none;border:1px solid black;border-radius:3px;}button{display:block;margin:5px auto;}</style></head><body><button id="btn1">移除div元素</button><button id="btn2">清空div元素</button><div id="div1"><p>p文本</p><b>b文本</b></div><script>$(document).ready(function(){$("#btn1").click(function(){$("#div1").remove();});$("#btn2").click(function(){$("#div1").empty();});});</script></body>
</html>

jQuery添加、删除元素相关推荐

jq增加删除html标签,jQuery添加\删除元素
jQuery添加\删除元素 html> jquery添加和删除元素 $(function(){ //添加元素 //元素内部添加 //append()在被选元素的结尾插入内容; // $('but ...
jQuery 添加删除元素
通过 jQuery,可以很容易地添加新元素/内容. 添加新的 HTML 内容我们将学习用于添加新内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() ...
jq添加或删除html元素,jQuery添加删除DOM元素方法详解
本文实例分析了jQuery添加删除DOM元素的方法.分享给大家供大家参考,具体如下: 介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面. 1.DOM ...
html添加删除元素属性,jquery怎么删除元素的属性？
jquery怎么删除元素的属性?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在jquery中,可以使用removeAttr()方法来删除元素的属性.r ...
扩展JavaScript数组（Array）添加删除元素方法
为JavaScript数组(Array)扩展添加删除元素方法作者:jcLee95:https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343 ...
jQuery添加插入元素技巧
1.jQuery添加插入元素技巧有两种:指定元素的里面和外面 2.里面添加: 里面的前面添加:prepend.prependTo: 里面的后面添加:append.appendTo: 3.外面添加: 外 ...
jquery 添加插入元素技巧前面和后面
jquery添加插入元素技巧: jquery添加分为在指定元素的里面添加和外面添加两种: 里面添加使用(append 和prepend) 里面添加又分为在里面的前面添加和后面添加里面的前面添加使用 ...
jquery中删除元素的remove（）方法
今天看jquery中删除元素的方法,包括remove()方法和empty() 方法 remove()方法为删除被选元素及子元素 empty() 方法为删除元素中的子元素其中remove()方法还有一 ...
JavaScript 学习-37.jQuery 添加/删除/替换元素
前言通过 jQuery,可以很容易地添加和删除元素. 添加元素添加元素主要用到四个方法 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after ...
html添加删除元素属性,jQuery学习笔记——.attr()和.removeAttr()方法操作元素属性
今天主要和大家一起分享一下如何使用jQuery的jQuery就可以让我们轻松的读取,添加,更改或删除一个(或多个)元素中的任何属性,在jQuery中我们可以使用下面的方法来实现:.attr():jQu ...

jQuery添加、删除元素

jQuery添加元素:

jQuery删除元素:

jQuery添加、删除元素相关推荐

最新文章

热门文章