JQuery DOM 插入节点
来源:互联网 发布:mac磁盘工具找不到u盘 编辑:程序博客网 时间:2024/04/27 14:17
动态创建HTML元素并没有实际用处,还需要将新创建的元素插入文档中。将新创建的节点插入文档最简单的办法是,让它成为这个文档的某个节点的子节点。前面使用了一个插入节点的方法append(),它会在元素内部追加新创建的内容。
将新创建的节点插入某个文档的方法并非只有一种,在JQuery中还提供了其他儿种插入节点的方法,如下表所示。读者可以根据实际需求灵活地做出多种选择。
HTML DOM结构如下:
1
<
p
class
=
"nm_p"
title
=
"欢迎访问简明现代魔法图书馆"
>欢迎访问简明现代魔法图书馆</
p
>
2
<
ul
class
=
"nm_ul"
>
3
<
li
title
=
'PHP魔法'
>简单易懂的PHP魔法</
li
>
4
<
li
title
=
'JavaScript魔法'
>简单易懂的JavaScript魔法</
li
>
5
<
li
title
=
'JQuery魔法'
>简单易懂的JQuery魔法</
li
>
6
</
ul
>
效果演示
欢迎访问简明现代魔法图书馆
- 简单易懂的PHP魔法
- 简单易懂的JavaScript魔法
- 新增节点:计算机算法
- 简单易懂的JQuery魔法
- 新增节点:设计模式
- 新增节点:数据结构
append()
向每个匹配的元素内部追加内容:
1
HTML代码:
2
<p>我想说:</p>
3
jQuery代码:
4
$(
"p"
).append(
"<b>你好</b>"
);
5
结果:
6
<p>我想说:<b>你好</b></p>
appendTo()
将所有匹配的元素追加到指定的元素中。实际上,使用该方法是颠倒了常规的$(A).append(B)的操作,即不是将B追加到A中,而是将A追加到B中:
1
HTML代码:
2
<p>我想说:</p>
3
jQuer代码:
4
$(
"<b>你好</b>"
).appendTo(
"p"
);
5
结果:
6
<p>我想说:<b>你好</b></p>
prepend()
向每个匹配的元素内部前置内容:
1
HTML代码:
2
<p>我想说:</p>
3
jQuer代码:
4
$(
"p"
).prepend<
"<b>你好</b>"
);
5
结果:
6
<p><b>你好</b>我想说:</p>
prependTo()
将所有匹配的元素前置到指定的元素中。实际上,使用该方法是颠倒了常规的$(A).prepend(B)的操作,即不是将B前置到A中,而是将A前置到B中:
1
HTML代码:
2
<p>我想说:</p>
3
jQuer代码:
4
$(
"<b>你好</b>"
).prependTo(
"p"
);
5
结果:
6
<p><b>你好</b>我想说:</p>
after()
在每个匹配的元索之后插入内容:
1
HTML代码:
2
<p>我想说:</p>
3
jQuer代码:
4
$(
"p"
).after(
"<b>你好</b>"
);
5
结果:
6
<p>我想说:</p><b>你好</b>
insertAfler()
将所有匹配的元素插入到指定元素的后面。实际上,使用该方法是颠倒了常规的$(A).after(B)的操作,即不是将B插入到A后面,而是将A插入到B后面:
1
HTML代码:
2
<p>我想说:</p>
3
jQuer代码:
4
$(
"<b>你好</b>"
).insertAfter(
"p"
);
5
结果:
6
<p>我想说:</p><b>你好</b>
before()
在每个匹配的元素之前插入内容:
1
HTML代码:
2
<p>我想说:</p>
3
jQuer代码:
4
$(
"p"
).before(
"<b>你好</b>"
);
5
结果:
6
<b>你好</b><p>我想说:</p>
insertBefore()
将所有匹配的元素捅入到指定的元素的前面。实际上,使用该方法是颠倒了常规的$(A).before(B)的操作,即不是将B插入到A前面,而是将A插入到B前面:
1
HTML代码:
2
<p>我想说:</p>
3
jQuer代码:
4
$(
"<b>你好</b>"
).insertBefore(
"p"
);
5
结果:
6
<b>你好</b><p>我想说:</p>
这些插入节点的方法不仅能将新创建的DOM元素插入到文档中,也能对原有的DOM元素进行移动。例如利用它们创建新元素并对其进行插入操作:
01
$(
function
(){
02
var
$li_1 = $(
"<li title='新增节点:数据结构'>新增节点:数据结构</li>"
);
// 创建第一个<li>元素
03
var
$li_2 = $(
"<li title='新增节点:设计模式'>新增节点:设计模式</li>"
);
// 创建第二个<li>元素
04
var
$li_3 = $(
"<li title='新增节点:计算机算法'>新增节点:计算机算法</li>"
);
// 创建第三个<li>元素
05
06
var
$parent = $(
".nm_ul"
);
// 获取<ul>节点。<li>的父节点
07
var
$two_li = $(
".nm_ul li:eq(1)"
);
// 获取<ul>节点中第二个<li>元素节点
08
09
$(
"#btn_1"
).click(
function
(){
10
$parent.append($li_1);
// 添加到<ul>节点中,使之能在网页中显示
11
});
12
13
$(
"#btn_2"
).click(
function
(){
14
// 可以采取链式写法:$parent.append($li_1).append($li_2);
15
$parent.append($li_2);
16
});
17
18
$(
"#btn_3"
).click(
function
(){
19
// insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后
20
$li_3.insertAfter($two_li);
21
});
22
});
也利用它们对原有的DOM元素进行移动:
1
$(
function
(){
2
var
$one_li = $(
"ul li:eq(1)"
);
// 获取<ul>节点中第二个<li>元素节点
3
var
$two_li = $(
"ul li:eq(2)"
);
// 获取<ul>节点中第三个<li>元素节点
4
$two_li.insertBefore($one_li);
//移动节点
5
});
转自:http://www.nowamagic.net/librarys/posts/jquery/7
- JQuery DOM 插入节点
- jQuery-DOM节点的插入
- jQuery DOM插入节点操作指南
- Jquery中的DOM操作 (二.插入节点)
- jQuery DOM操作之插入节点
- jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
- 3.2.3: jQuery的DOM操作之插入节点
- jQuery之dom操作(查询、创建、插入、删除、复制节点)
- jQuery中的DOM节点的创建与多种插入方式
- DOM节点的插入
- DOM插入节点
- Jquery操作DOM节点
- jquery dom 节点操作
- jQuery DOM节点操作
- jQuery DOM节点
- jquery(遍历-dom节点)
- jQuery DOM节点操作
- 【jQuery】DOM 节点操作
- Android插件化的思考——仿QQ一键换肤,思考比实现更重要!
- 让我们彻底搞懂C/C++函数指针吧(三)
- linux的发行版以及联系与区别
- 155. Min Stack
- Java如何有效避免OOM:利用软引用和弱引用
- JQuery DOM 插入节点
- Ubuntu下键盘输入错乱问题
- 2304: [Apio2011]寻路
- 网上常用免费的webservice
- map中的元素按照key,value值排序
- Leetcode 380. Insert Delete GetRandom O(1) 常数增删改系统 解题报告
- ROM简单制作教程
- 1038. Recover the Smallest Number (30)
- QUT个人赛--寻找最近公共祖先(图的遍历<POJ1330>)