DOM节点操作-Indexof.DOC

第 6 章 DOM 节点操作 学习要点： 创建节点 插入节点 包裹节点 节点操作 DOM 中有一个非常重要的功能，就是节点模型，也就是 DOM 中的“M”。页面中的元素结构就是通过这种节点模型来互相对应着的，我们只需要通过这些节点关系，可以创建、插入、替换、克隆、删除等等一些列的元素操作。 一．创建节点 为了使页面更加智能化，有时我们想动态的在 html 结构页面添加一个元素标签，那么在插入之前首先要做的动作就是：创建节点。 var box = $(div id=box节点/div); //创建一个节点 $(body).append(box); //将节点插入到body元素内部 二．插入节点 在创建节点的过程中，其实我们已经演示怎么通过.append()方法来插入一个节点。但除了这个方法之余呢，jQuery 提供了其他几个方法来插入节点。 内部插入节点方法 方法名 描述 append(content) 向指定元素内部后面插入节点 content append(function (index, html) {}) 使用匿名函数向指定元素内部后面插入节点 appendTo(content) 将指定元素移入到指定元素 content 内部后面 prepend(content) 向指定元素 content 内部的前面插入节点 prepend(function (index, html) {}) 使用匿名函数向指定元素内部的前面插入节点 prependTo(content) 将指定元素移入到指定元素 content 内部前面 $(div).append(strong节点/strong); //向 div 内部插入 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)); //同上 外部插入节点方法 方法名 描述 after(content) 向指定元素的外部后面插入节点 content after(function (index, html) {}) 使用匿名函数向指定元素的外部后面插入节点 before(content) 向指定元素的外部前面插入节点 content before(function (index, html) {}) 使用匿名函数向指定元素的外部前面插入节点 insertAfter(content) 将指定节点移到指定元素 content 外部的后面 insertBefore(content) 将指定节点移到指定元素 content 外部的前面 $(div).after(span节点/span); //向 div 的同级节点后面插入 span $(div).after(function (index, html) { //使用匿名函数，同上 return span节点/span; }); $(div).before(span节点/span); //向 div 的同级节点前面插入 span $(div).before(function (index, html) { //使用匿名函数，同上 return span节点/span; }); $(span).insertAfter(div); //将 span 元素移到 div 元素外部的后面 $(span).insertBefore(div); //将 span 元素移到 div 元素外部的前面 三．包裹节点 jQuery 提供了一系列方法用于包裹节点，那包裹节点是什么意思呢？其实就是使用字符串代码将指定元素的代码包含着的意思。 包裹节点 方法名 描述 wrap(html)