JQuery之添加与删除元素
2016-07-01 09:17
411 查看
一、添加元素:
1.
jQuery添加元素:
通过 jQuery,可以很容易地添加新元素/内容。
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
实例:
$("p").append("hello JQuery");//在p内容后面添加内容“hello
JQuery”。
$("p").prepend("hello
JQuery");//在p内容前面添加内容“hello
JQuery”。
$("p").after("hello
JQuery");//在p内容后面添加内容“hello
JQuery”。
$("p").before("hello
JQuery");//在p内容前面添加内容“hello
JQuery”。
append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素。
在下面的例子中,我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中(对 prepend() 同样有效):
eg:
function appendText()
{
var txt1="<p>Text.</p>"; // Create element with HTML
var txt2=$("<p></p>").text("Text."); // Create with jQuery
var txt3=document.createElement("p"); // Create with DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // Append the new elements
}
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中,我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中(对 before() 同样有效):
function afterText()
{
var txt1="<b>I </b>"; // Create element with HTML
var txt2=$("<i></i>").text("love "); // Create with jQuery
var txt3=document.createElement("big"); // Create with DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // Insert new elements after img
}
二、删除元素:
remove() 删除被选元素(及子元素)。
empty()删除被选元素的子元素。
eg:
$("div").remove();//删除div及其子元素。
$("div").empty();//删除div的子元素。
过滤被删除的元素:
jQuery remove() 方法也可接受一个参数,允许对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素:
$("p").remove(".italic");
1.
jQuery添加元素:
通过 jQuery,可以很容易地添加新元素/内容。
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
实例:
$("p").append("hello JQuery");//在p内容后面添加内容“hello
JQuery”。
$("p").prepend("hello
JQuery");//在p内容前面添加内容“hello
JQuery”。
$("p").after("hello
JQuery");//在p内容后面添加内容“hello
JQuery”。
$("p").before("hello
JQuery");//在p内容前面添加内容“hello
JQuery”。
2.通过 append() 和 prepend() 方法添加若干新元素:
append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素。在下面的例子中,我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中(对 prepend() 同样有效):
eg:
function appendText()
{
var txt1="<p>Text.</p>"; // Create element with HTML
var txt2=$("<p></p>").text("Text."); // Create with jQuery
var txt3=document.createElement("p"); // Create with DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // Append the new elements
}
3.通过 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。在下面的例子中,我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中(对 before() 同样有效):
function afterText()
{
var txt1="<b>I </b>"; // Create element with HTML
var txt2=$("<i></i>").text("love "); // Create with jQuery
var txt3=document.createElement("big"); // Create with DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // Insert new elements after img
}
二、删除元素:
remove() 删除被选元素(及子元素)。
empty()删除被选元素的子元素。
eg:
$("div").remove();//删除div及其子元素。
$("div").empty();//删除div的子元素。
过滤被删除的元素:
jQuery remove() 方法也可接受一个参数,允许对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素:
$("p").remove(".italic");
相关文章推荐
- 常用的jquery
- jQuery第4节-链接api实现星座运势和手机号归属地查询
- jquery jtemplates.js模板渲染引擎的详细用法第一篇
- jquery tips
- Jquery操作select、checkbox、radio详细讲解
- Jquery noConfict()方法
- jquery总结
- Struts2+jQuery+JSON实现异步交互(找资料看到的一篇不错的文章)
- 第一次想使用插件,就看看啦!jquery-confirm
- JQuery初步
- An invalid form control with name='file[]' is not focusable.间接点击form表单的<input type="file">出现的问题
- 利用 jQuery UI 和 Ajax 创建可定制的 Web 界面
- jquery格式化数字
- jquery Ztree
- jquery Ztree
- jQuery Mobile基础学习(1)
- 根据传入条件设置checkbox
- JQuery,拼接字符串问题(求助)
- jQuery图片翻牌品牌翻转切换效果
- jQuery细节问题总结