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中的变量是传值还是传址的?
Apr 19 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
javascript中闭包closure的深入讲解
Mar 03 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线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
javascript 面向对象的JavaScript类
2010/05/04 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
Python中的类与对象之描述符详解
2015/03/27 Python
详解python中的文件与目录操作
2017/07/11 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
Python中extend和append的区别讲解
2019/01/24 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
linux面试题参考答案(7)
2012/10/29 面试题
单位在职证明范本
2014/01/09 职场文书
小学运动会开幕词
2015/01/28 职场文书
拉贝日记观后感
2015/06/05 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript
nginx访问报403错误的几种情况详解
2022/07/23 Servers