JQuery插入DOM节点的方法


Posted in Javascript onJune 11, 2015

本文实例讲述了JQuery插入DOM节点的方法。分享给大家供大家参考。具体分析如下:

动态创建HTML元素并没有实际用处,还需要将新创建的元素插入文档中。将新创建的节点插入文档最简单的办法是,让它成为这个文档的某个节点的子节点。前面使用了一个插入节点的方法append(),它会在元素内部追加新创建的内容。

将新创建的节点插入某个文档的方法并非只有一种,在JQuery中还提供了其他儿种插入节点的方法,如下表所示。读者可以根据实际需求灵活地做出多种选择。

HTML DOM结构如下:

<p class="nm_p" title="欢迎访问三水点靠木" >欢迎访问三水点靠木</p>
<ul class="nm_ul">
  <li title='PHP编程'>简单易懂的PHP编程</li>
  <li title='JavaScript编程'>简单易懂的JavaScript编程</li>
  <li title='JQuery编程'>简单易懂的JQuery编程</li>
</ul>

append()

向每个匹配的元素内部追加内容:

HTML代码:

<p>我想说:</p>

jQuery代码:
$("p").append("<b>你好</b>");

结果:
<p>我想说:<b>你好</b></p>

appendTo()

将所有匹配的元素追加到指定的元素中。实际上,使用该方法是颠倒了常规的$(A).append(B)的操作,即不是将B追加到A中,而是将A追加到B中:

HTML代码:

<p>我想说:</p>

jQuer代码:
$("<b>你好</b>").appendTo("p");

结果:
<p>我想说:<b>你好</b></p>

prepend()

向每个匹配的元素内部前置内容:

HTML代码:

<p>我想说:</p>

jQuer代码:
$("p").prepend<"<b>你好</b>");

结果:
<p><b>你好</b>我想说:</p>

prependTo()

将所有匹配的元素前置到指定的元素中。实际上,使用该方法是颠倒了常规的$(A).prepend(B)的操作,即不是将B前置到A中,而是将A前置到B中:

HTML代码:

<p>我想说:</p>

jQuer代码:
$("<b>你好</b>").prependTo("p");

结果:
<p><b>你好</b>我想说:</p>

after()

在每个匹配的元索之后插入内容:

HTML代码:

<p>我想说:</p>

jQuer代码:
$("p").after("<b>你好</b>");

结果:
<p>我想说:</p><b>你好</b>

insertAfler()

将所有匹配的元素插入到指定元素的后面。实际上,使用该方法是颠倒了常规的$(A).after(B)的操作,即不是将B插入到A后面,而是将A插入到B后面:

HTML代码:

<p>我想说:</p>

jQuer代码:
$("<b>你好</b>").insertAfter("p");

结果:
<p>我想说:</p><b>你好</b>

before()

在每个匹配的元素之前插入内容:

HTML代码:

<p>我想说:</p>

jQuer代码:
$("p").before("<b>你好</b>");

结果:
<b>你好</b><p>我想说:</p>

insertBefore()

将所有匹配的元素捅入到指定的元素的前面。实际上,使用该方法是颠倒了常规的$(A).before(B)的操作,即不是将B插入到A前面,而是将A插入到B前面:

HTML代码:

<p>我想说:</p>

jQuer代码:
$("<b>你好</b>").insertBefore("p");

结果:
<b>你好</b><p>我想说:</p>

这些插入节点的方法不仅能将新创建的DOM元素插入到文档中,也能对原有的DOM元素进行移动。例如利用它们创建新元素并对其进行插入操作:

$(function(){
  var $li_1 = $("<li title='新增节点:数据结构'>新增节点:数据结构</li>"); // 创建第一个<li>元素
  var $li_2 = $("<li title='新增节点:设计模式'>新增节点:设计模式</li>"); // 创建第二个<li>元素
  var $li_3 = $("<li title='新增节点:计算机算法'>新增节点:计算机算法</li>"); // 创建第三个<li>元素
  var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
  var $two_li = $(".nm_ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点
  $("#btn_1").click(function(){
    $parent.append($li_1); // 添加到<ul>节点中,使之能在网页中显示
  });
  $("#btn_2").click(function(){
    // 可以采取链式写法:$parent.append($li_1).append($li_2);
    $parent.append($li_2);   
  });
  $("#btn_3").click(function(){
    // insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后
    $li_3.insertAfter($two_li); 
  });
});

也利用它们对原有的DOM元素进行移动:

$(function(){
  var $one_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点
  var $two_li = $("ul li:eq(2)"); // 获取<ul>节点中第三个<li>元素节点
  $two_li.insertBefore($one_li); //移动节点
});

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
深入理解Javascript中的循环优化
Nov 09 Javascript
js简单的表格添加行和删除行操作示例
Mar 31 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
jQuery实现强制cookie过期方法汇总
May 22 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
php基于redis处理session的方法
Mar 14 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
小程序如何写动态标签的实现方法
Feb 05 Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 Javascript
JQuery创建DOM节点的方法
Jun 11 #Javascript
JQuery查找DOM节点的方法
Jun 11 #Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 #Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 #Javascript
jquery序列化方法实例分析
Jun 10 #Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 #Javascript
jQuery替换textarea中换行的方法
Jun 10 #Javascript
You might like
PHP的FTP学习(一)[转自奥索]
2006/10/09 PHP
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
php中inlcude()性能对比详解
2012/09/16 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
js模拟类继承小例子
2010/07/17 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
一文了解Vue中的nextTick
2019/05/06 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
Python中字典和JSON互转操作实例
2015/01/19 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
python DataFrame 取差集实例
2019/01/30 Python
python相对企业语言优势在哪
2020/06/12 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
护士实习生自我鉴定范文
2013/12/10 职场文书
高三体育教学反思
2014/01/29 职场文书
教师产假请假条
2014/04/10 职场文书
兵马俑导游词
2015/02/02 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
Python学习之迭代器详解
2022/04/01 Python
Python实现文字pdf转换图片pdf效果
2022/04/03 Python
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL