DOM 节点操作

DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”。页面中的元 素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建、 插入、替换、克隆、删除等等一些列的元素操作。

一.创建节点

为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点。

//创建一个节点 
var box=$(‘<div id="box">节点</div>‘);

//将节点插入到<body>元素内部
$(‘body‘).append(box);

二.插入节点 ##
在创建节点的过程中,其实我们已经演示怎么通过.append()方法来插入一个节点。但除 了这个方法之余呢,jQuery 提供了其他几个方法来插入节点。

//向 div 内部插入 strong 节点

$(‘div‘).append(‘<strong>节点</strong>‘);

$(‘div‘).append(function(index,html){

//使用匿名函数插入节点,html 是原节点

return ‘<strong>节点</strong>‘;

});

$(‘span‘).appendTo(‘div‘); //讲 span 节点移入 div 节点内

$(‘span‘).appendTo($(‘div‘)); //同上

$(‘div‘).prepend(‘<span>节点</span>‘); //将 span 插入到 div 内部的前面

$(‘div‘).append(function(index,html){

//使用匿名函数,同上

return ‘<span>节点</span>‘;

});

$(‘span‘).prependTo(‘div‘); //将 span 移入 div 内部的前面

$(‘span‘).prependTo($(‘div‘)); //同上

三.节点操作 
除了创建、插入和包裹节点,jQuery 还提供了一些常规的节点操作方法:复制、替换和 删除节点。
//复制节点
$(‘body‘).append($(‘div‘).clone(true)); //复制一个节点添加到 HTML 中

注意:clone(true)参数可以为空,表示只复制元素和内容,不复制事件行为。而加上 true 参数的话,这个元素附带的事件处理行为也复制出来。

//删除节点
$(‘div‘).remove(); //直接删除 div 元素

注意:.remove()不带参数时,删除前面对象选择器指定的元素。而.remove()本事也可以 带选择符参数的,比如:$(‘div‘).remove(‘#box‘);只删除 id=box 的 div。

//保留事件的删除节点
$(‘div‘).detach(); //保留事件行为的删除

注意:.remove()和.detach()都是删除节点,而删除后本身方法可以返回当前被删除的节 点对象,但区别在于前者在恢复时不保留事件行为,后者则保留。

//清空节点
$(‘div‘).empty(); //删除掉节点里的内容

//替换节点
$(‘div‘).replaceWith(‘<span>节点</span>‘); //将 div 替换成 span 元素
$(‘<span>节点</span>‘).replaceAll(‘div‘); //同上

时间: 2024-10-29 19:10:57

DOM 节点操作的相关文章

(转载)html dom节点操作(获取/修改/添加或删除)

DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.在 HTML DOM 中,所有事物都是节点.DOM 是被视为节点树的 HTML. 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节

深入理解DOM节点操作

× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节点操作方法 前提 DOM提供节点操作的方法是因为DOM节点关系指针都是只读的 下列代码中想通过修改myUl的父级节点来修改其节点关系,但由于parentNode属性是只读的,所以修改无效,在IE8-浏览器下甚至会报错 <div id="myDiv"></div> &

原生JS的DOM节点操作

DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节点. 操作DOM节点的方式无非就是:创建.添加(插入).移除.替换.查找(获取).克隆DOM节点. 创建文本节点:var newText = document.createTextNode('文本节点');创建标签节点:var newNode = document.createElement('di

jQuery DOM节点操作 - 父节点、子节点、兄弟节点

------------------------------------------------------------------- 源文地址: http://www.cnblogs.com/yunlei0821/p/7577400.html ,转载请务必保留此出处. 子(/孙)节点: .children([selector]). 获得匹配元素集合中每个元素的所有直接子元素(选择器可选). 实例: <div> <a href="#"><span>w

jQuery DOM 节点操作

DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面中的元素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建.插入.替换.克隆.删除等等一些列的元素操作. 一.创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. $('div').append('<strong>节点</strong>'); //向 div 内部插入 strong 节点 $('di

通过DOM节点操作来获取表单信息

这是之前突发奇想地用dom节点的关系来操作表单的故事.. 事情的经过是这样的,大概就是一个平台注册后有留言功能,管理员登录之后可以对这些留言进行回复.这个页面呢,就是通过foreach获取到数据库里的信息,把用户的ID以及留言信息最后呈现在界面上的样子大概如下图(我的画图天赋真是杠杠滴)(害羞捂脸) 没错就是这么酷炫的. 左侧是用户的ID 中间是用户留言内容 每个后面都有一个回复按钮 管理员点击回复之后 相应的留言框下部就会出现一个文本框,然后就可以愉快的回复了.对了还有一个回复发送以及删除功能

jQuery DOM节点操作

一.创建节点 var box = $('<div id =box>节点</div>');  //创建一个节点 $('body').appended(box); //将节点插入<body>元素内部 二.插入节点 内部插入节点方法 append(content)     向指定元素后面插入节点content append(function (index,hml) {}) 使用匿名函数向指定元素后面插入节点content(html是原节点) appendTo(content)

JS Dom节点操作demo!

通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ return document.createElement(tagName); } var table = c('table'); var tbody = c('tbody'); table.appendChild(tbody); for(var i = 0;i<4;i++){ var tr = c(

javasript 的DOM 节点操作:创建,插入,删除,复制以及查找节点

DOM 含义: DOM 是文档对象模型(Document Object Model) 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准.其赋予了JS 操作节点的能力,当网页被加载时,浏览器就会创建页面的文档对象模型. 节点: 根据W3C的HTML DOM 标准,HTML 文档中的所有内容都是节点. 1. 整个文档是一个文档节点 2. 每个HTML元素是元素节点 3. HTML元素内的文本是文本节点 4.每个HTML属性都是属性节点 5.每个注释都是注释节点 所以HTML DOM