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 相关文章推荐
详谈 Jquery Ajax异步处理Json数据.
Sep 09 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
js仿小米官网图片轮播特效
Sep 29 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
DOM事件探秘篇
Feb 15 Javascript
vue 左滑删除功能的示例代码
Jan 28 Javascript
react中Suspense的使用详解
Sep 01 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
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分页函数
2006/07/08 PHP
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
Python编写检测数据库SA用户的方法
2014/07/11 Python
Python文件的读写和异常代码示例
2017/10/31 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
python3.7调试的实例方法
2020/07/21 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
如何强制垃圾回收
2015/10/06 面试题
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
民族团结先进个人材料
2014/02/05 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书