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 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
window.onload使用指南
Sep 13 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
Angular的MVC和作用域
Dec 26 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 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 Ajax实现页面无刷新发表评论
2007/01/02 PHP
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
PHP5常用函数列表(分享)
2013/06/07 PHP
javascript中创建对象的三种常用方法
2010/12/30 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python执行外部程序的常用方法小结
2015/03/21 Python
python插入数据到列表的方法
2015/04/30 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
python list删除元素时要注意的坑点分享
2018/04/18 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
教师自我评价范文
2013/12/16 职场文书
机械专业求职信
2014/05/25 职场文书
对学校的意见和建议
2015/06/04 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS