jQuery中对节点进行操作的相关介绍

动态创建Dom节点

jQuery中使用$(html字符串)来动态创建Dom节点,并且返回一个jQuery对象,可以调用append等方法将创建的节点添加到Dom中。

例如:

var link = $("<a href='http://www.baidu.com'>百度</a>");

$("div:first").append(link);

添加节点元素的方法:

Append方法用来在元素的末尾追加元素(最后一个子节点)

Prepend在元素的开始添加元素(第一个子节点)

After:在元素之后添加元素(添加兄弟节点)

Before:在元素之前添加元素(添加兄弟节点)

子元素.appendTo(父元素):在元素的末尾追加一个子元素

子元素.prependTo(父元素):在元素的开始追加一个子元素

A.insertBefore(B)    将A插入到B的前面,等同于B.before(A);

X.insertAfter(B)   将X插入到Y的后面,等同于Y.after(X);

删除节点:

Empty():清空该元素下的所有子节点

等同于:while(ele.firstChild){ele.removeChild(ele.firstChild);}

Remove(selectot);自杀;删除当前元素,返回值为被删除的元素,可以讲节点删除之后放到其他节点下面,有一个移动的效果,例如:

var lis = $("#ulSite li").remove();

$("#ulSite2").append(lis);

Clone()克隆节点,支复制节点,不复制节点

Clone(true):克隆节点带事件

节点的替换:

$("br").replaceWith("<hr/>");

$("br").replaceAll("<hr/>");

包裹节点

Wrap()方法用来将所有的元素逐个用指定的标签包裹

$("b").wrap("<font color='red'></font>");将所有粗体字红色显示

wrapInner();在内部围绕

时间: 2013-04-15

jQuery移动和复制dom节点实用DOM操作案例

本文章简单的介绍了关于jQuery移动和复制dom节点程序实现,有需要学习的朋友可参考参考. 在做一个项目时,需要dom节点移动,如以下代码: 复制代码 代码如下: <div></div> <p></p> 需要把p标签移动到div标签里,经过测试发现,在jQuery中移动dom节点非常方便: 复制代码 代码如下: $('div').append($('p')) 这样即可把p标签移动到div标签里,千万不要写成这样: 复制代码 代码如下: $('div').a

js和jquery对dom节点的操作(创建/追加)

复制代码 代码如下: <script src="jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#Button1').click(function () { // var ha = '<p>a</p>'; // $('div').app

jQuery:节点(插入,复制,替换,删除)操作

复制代码 代码如下: <html> <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>jQuery插入,复制.替换和删除节点</title> <script type="text/javascript" src="jquery-1.3.2.js&q

jQuery表格的维护和删除操作

最近学习jQuery,可以利用js函数来实现对表格的维护和删除,相对于JavaScript简单方便 首先看看页面的实现效果 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" conte

java对XML文件的解析、节点的增加、删除操作总结

1.java代码: 主要采用dom来进行操作 复制代码 代码如下: package test; import java.io.IOException; import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import javax.xml.parsers.ParserConfigurationException; import javax.xml.transform.T

PHP实现数组向任意位置插入,删除,替换数据操作示例

本文实例讲述了PHP实现数组向任意位置插入,删除,替换数据操作.分享给大家供大家参考,具体如下: array_splice函数可以实现任意位置插入和删除,替换 array array_splice ( array &$input , int $offset [, int $length = count($input) [, mixed $replacement = array() ]] ) offset 如果 offset 为正,则从 input 数组中该值指定的偏移量开始移除.如果 offse

JS实现添加,替换,删除节点元素的方法

本文实例讲述了JS实现添加,替换,删除节点元素的方法.分享给大家供大家参考,具体如下: 一直以来,对于节点操作比较纠结,特别是插入到某某节点之后.居然没有这个方法,以前的我写的方法有问题,是把新节点插入到旧节点的里面去了,还是该用insertBefore方法可以实现 下面是方法: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose

Jquery属性的获取/设置及样式添加/删除操作技巧分析

本文实例讲述了Jquery属性的获取/设置及样式添加/删除操作技巧.分享给大家供大家参考,具体如下: Jquery属性的获取与设置 //找到第一个input,通过attr设置属性value的值 $("input:first").attr('value','新设值'); //同时为多个属性赋值 $("input:first").attr({'attr1':'v1','attr2':'v2'...}); //找到最后一个input,通过使用removeAttr删除属性

JQuery EasyUI学习教程之datagrid 添加、修改、删除操作

一篇关于JQueryEasyUI学习之datagrid 添加.修改.删除 学习笔记教程有需要了解的朋友可参考本的笔记,批量删除,双击表单修改.选中行修改,增加行修改,再有就是扩展editor的方法,无需废话,直接上代码,代码中的注释写的很详细 <script type="text/javascript" charst="utf-8">var editFlag = undefined;//设置一个编辑标记 //因为layout框架指向href时,只取htm

jQuery实现html table行Tr的复制、删除、计算功能

本文实例讲述了jQuery实现html table行Tr的复制.删除.计算功能.分享给大家供大家参考,具体如下: 添加行: function addtr(){ var tr = $("#tb tr").eq(0).clone(); tr.appendTo("#tb"); //tr.insertBefore("#tb tr:last"); } <table id="tb"> <tr> </tr>

JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析

本文实例讲述了JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作.分享给大家供大家参考,具体如下: createElement,createTextNode,appendChild,insertBefore,removeChild,replaceChild createElement 以下代码是用于创建 <p> 元素: var para = document.createElement("p"); createTextNode 为 <p>