JavaScript（20）jQuery HTML 加入和删除元素
jQuery - 加入元素
通过 jQuery，能够非常easy地加入新元素/内容。
加入新的 HTML 内容的四个 jQuery 方法：
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
jQuery append() 方法在被选元素的结尾插入内容。
$("p").append("Some appended text.");
jQuery prepend() 方法在被选元素的开头插入内容。
$("p").prepend("Some prepended text.");
jQuery after() 方法在被选元素之后插入内容。
$("img").after("Some text after");
jQuery before() 方法在被选元素之前插入内容。
$("img").before("Some text before");
这样能看出来前两个和后两个有什么差别么。。。反正我是要琢磨琢磨。。。上代码分析：
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.1.js"></script>
<script>
$(document).ready(function(){ $("#btn1").click(function(){
$("#test1").prepend("<b>Before</b>");
});
$("#btn2").click(function(){
$("#test1").append("<i>After</i>");
}); $("#btn3").click(function(){
$("#test2").before("<b>Before</b>");
});
$("#btn4").click(function(){
$("#test2").after("<i>After</i>");
}); });
</script>
</head> <body>
<button id="btn1">在范特西前面加入文本</button>
<button id="btn2">在范特西后面加入文本</button>
<button id="btn3">在依旧范特西前面加入文本</button>
<button id="btn4">在依旧范特西后面加入文本</button> <p id="test1">范特西</p>
<p id="test2">依旧范特西</p>
</body>
</html>
感觉贴图好麻烦。。。还是文字描写叙述吧。。。点完上述4个button后，效果：
Before范特西After
Before
依旧范特西
After
是不是发现了什么呀。。。继续，审查元素：
append() 和 prepend() 方法，在被选元素内（<p>...... ......</p>）插入内容；
after() 和 before() 方法，在被选元素外（......<p> </p>......）插入内容。
jQuery - 删除元素
通过 jQuery，能够非常easy地删除已有的 HTML 元素。
如需删除元素和内容，一般可使用下面两个 jQuery 方法：
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
jQuery remove() 方法删除被选元素及其子元素。
$("#div1").remove();
jQuery empty() 方法删除被选元素的子元素。
$("#div1").empty();
过滤被删除的元素
jQuery remove() 方法也能够接受一个參数，同意对被删元素进行过滤。
该參数能够是不论什么 jQuery 选择器的语法。
以下的样例删除 class="italic" 的全部 <p> 元素：
$("p").remove(".italic");
这个地方我思考了一下，“删除 class="italic" 的全部 <p> 元素”和“删除 <p> 的全部 class="italic" 元素”是一样的。。。即：
$(".italic").remove("p");
那么 empty() 方法也能够接受一个參数不？答案是否定的！
另外另一个问题，看到这样一段代码：
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
为什么能够写成上述形式呢？不太清楚当中的规则。。。
（20140603追加对上述问题的理解）
jQuery 核心函数：jQuery(html,[ownerDocument])
依据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。同一时候设置一系列的属性、事件等。
你能够传递一个手写的 HTML 字符串，或者由某些模板引擎或插件创建的字符串，也能够是通过 AJAX 载入过来的字符串。可是在你创建 input 元素的时会有限制，能够參考第二个演示样例。当然这个字符串能够包括斜杠 (比方一个图像地址)，还有反斜杠。（这些如今还不太好理解，能够直接看后面的。）
当你创建单个元素时，请使用闭合标签或 XHTML 格式。比如，创建一个 span ，能够用$("<span/>") 或
$("<span></span>") ，但不推荐 $("<span>")。在jQuery 中，这个语法等同于$(document.createElement("span")) 。
上述代码等同于：
var txt2=$("<p>Text.</p>"); // 以 jQuery 创建新元素
使用变量和直接使用$("<></>") 是不一样的。最后放一段代码作为总结：
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.1.js"></script>
<script>
$(document).ready(function(){ var txt1=$("<p>Text1</p>");
var txt2=$("<p></p>").text("Text2"); $("#btn1").click(function(){
$("p#text1").append(txt1);
}); $("#btn1").click(function(){
$("p#text2").append(txt2);
}); $("#btn2").click(function(){
$("p#text3").append($("<p>Text1</p>"));
}); $("#btn2").click(function(){
$("p#text4").append($("<p></p>").text("Text2"));
}); });
</script>
</head> <body>
<p id=text1>This is a paragraph.</p>
<p id=text2>This is another paragraph.</p>
<button id="btn1">仅仅能追加一次文本</button> <p id=text3>This is a paragraph.</p>
<p id=text4>This is another paragraph.</p>
<button id="btn2">每次都能追加文本</button>
</body>
</html>
眼下仅仅是先解决疑问，详细的之后再学习。
JavaScript（20）jQuery HTML 加入和删除元素的更多相关文章
- JavaScript、jQuery获取页面及个元素高度、宽度
Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.client ...
- javascript在数组的循环中删除元素
在开发JavaScript应用的过程中,经常会遇到在循环中移除指定元素的需求. 按照常规的思路,就是对数组进行一个for循环,然后在循环里面进行if判断,在判断中删除掉指定元素即可. 但是实际情况往往 ...
- JQuery 数组获取和删除元素
<script> var target = []; target [0] = "aaa000"; target [1] = "bbb111"; ta ...
- javascript和jquery 获取触发事件的元素
一个很简单的问题,却因为大意,经常忘了处理,导致程序运行出错. <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- Javascript及Jquery获取元素节点以及添加和删除操作
用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...
- JQUERY添加、删除元素、eq()方法；
一.jQuery - 添加元素 1.append() - 在被选元素内部的结尾插入指定内容 2.prepend() - 在被选元素内部的开头插入指定内容 3.after() - 在被选元素之后插入内容 ...
- jQuery添加删除元素
$(document).ready(function () { $('#radioExtranet').on('click', function () { showProjectInformation ...
- Jquery中删除元素方法
empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除 语法: empty() remove(expr); empty用来删除指定元素的子元素,remove用来删除元素 ...
- jQuery 学习03——HTML：捕获、设置、添加元素、删除元素、CSS类、CSS()方法、尺寸
jQuery - 获取内容text().html() 以及 val()和属性attr() jQuery 中非常重要的部分,就是操作 DOM 的能力. DOM = Document Object Mod ...
随机推荐
- [.NET MVC进阶系列03] Views 视图基础
[注:此文对应Chapter 3:Views] 一.View的功能: 1.View用来呈现页面UI,通过Controller来指定View: 要注意的是,MVC和以前基于文件的Web应用不同,URL指 ...
- Spring data rest 如何显示主键
How to expose the resourceId with Spring-Data-Rest? Spring-Data-Rest is a quite new project in the S ...
- java.lang.Thread.State类详解
public static enum Thread.Stateextends Enum<Thread.State>线程状态.线程可以处于下列状态之一: 1.NEW 至今尚未启动的线程的状态 ...
- python引用在函数传参时的体现以及可变与不可变对象的对比
今天偶然看到 vamei 老师的博客 http://www.cnblogs.com/vamei/archive/2012/07/10/2582795.html 讲的是python动态类型以及引用的事儿 ...
- 制作动态链接库给opencv程序使用（使用QtCreator）
新建一个c++库项目 pro文件 #------------------------------------------------- # # Project created by QtCreator ...
- Zabbix探索：模板中发现规则的使用
其实模板的建立只要多看看系统自带的模板内容就清楚了,一目了然,不用做过多解释. 目前使用到的自动发现规则有端口和文件系统的,其他还没有仔细研究. 下面说说遇到的几个问题. 1.Key不能相同.普通项目 ...
- js跟着鼠标移动的文字
废话不多说,直接上代码,有注释: <head> <title></title> <style type="text/css"> sp ...
- C/C++：原码、反码和补码
正数的原码.反码和补码是一模一样的. 负数的反码的符号位跟原码一样,但其余各位取反. 负数的补码是其反码的最末位加1得到,即原码取反加1. 补码的补码就是原码. 浮点数的存储格式随着机器的 ...
- leetcode—Same Tree
1.题目描述 Given two binary trees, write a function to check if they are equal or not. Two binary tree ...
- 2014-02-27WPF学习笔记
//StackPanel布局 //创建时间:11:33 页面布局:Orientation默认纵向:Vertical水平为:Horizontal <Button> <Button.Co ...