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 api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
Javascript this 的一些学习总结
Aug 02 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
vue-router单页面路由
Jun 17 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 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
PHP4在Windows2000下的安装
2006/10/09 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
event.srcElement 用法笔记e.target
2009/12/18 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
node.js中的require使用详解
2014/12/15 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
vue的for循环使用方法
2019/02/12 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
Python yield与实现方法代码分析
2018/02/06 Python
Python检测网络延迟的代码
2018/05/15 Python
利用python如何处理nc数据详解
2018/05/23 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
教师对学生的寄语
2014/04/03 职场文书
学习十八大的心得体会
2014/09/12 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
学生保证书
2015/01/16 职场文书
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技