jQuery DOM插入节点操作指南

方法 描述 示例
append() 向每个匹配的元素内部追加内容
HTML代码：<p>我想说:</p>

jQuery代码：

$("p").append("<b>你好</b>");

结果：

<p>我想说:<b>你好</b></p>
appendTo()
将所有匹配的元素追加到指定的元素中

。实际上，使用该方法是颠倒了常规

的$(A).append(B)的操作，是将A追加到B中。
HTML代码：<p>我想说:</p>

jQuery代码：

$("<b>你好</b>").appendTo("p")

结果：

<p>我想说:<b>你好</b></p>
prepend() 向每个匹配的元素内部前置内容
HTML代码：<p>我想说:</p>

jQuery代码：

$("p").prepend("<b>你好</b>")

结果：

<p><b>你好</b>我想说：</p>
prependTo()
将所有匹配的元素前置到指定的元素中

。实际上，使用该方法是颠倒了

常规$(A).prepend(B)操作。
HTML代码：<p>我想说:</p>

jQuery代码：

$("<b>你好</b>").prependTo("p")

结果：

<p><b>你好</b>我想说：</p>
after() 在每个匹配的元素后插入内容
HTML代码：<p>我想说:</p>

jQuery代码：

$("p").after("<b>你好</b>")

结果：

<p>我想说：</p><b>你好</b>
insertAfter()
将所有匹配的元素插入到指定元

素的后面，实际上，使用该方法

是颠倒了常规的$(A).after(B)操作
HTML代码：<p>我想说:</p>

jQuery代码：

$("<b>你好</b>").insertAfter("p")

结果：

<p>我想说：</p><b>你好</b>
before() 在每个匹配的元素之前插入内容
HTML代码：<p>我想说:</p>

jQuery代码：

$("p").before("<b>你好</b>")

结果：

<b>你好</b><p>我想说：</p>
insertBefore()
将所以匹配的元素插入到指

定的元素的前面。实际上，

使用该方法是颠倒了常规

的$(A).before(B)的操作。
HTML代码：<p>我想说:</p>

jQuery代码：

$("<b>你好</b>").insertBefore("p")

结果：

<b>你好</b><p>我想说：</p>

以上就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • JQuery插入DOM节点的方法

    本文实例讲述了JQuery插入DOM节点的方法.分享给大家供大家参考.具体分析如下: 动态创建HTML元素并没有实际用处,还需要将新创建的元素插入文档中.将新创建的节点插入文档最简单的办法是,让它成为这个文档的某个节点的子节点.前面使用了一个插入节点的方法append(),它会在元素内部追加新创建的内容. 将新创建的节点插入某个文档的方法并非只有一种,在JQuery中还提供了其他儿种插入节点的方法,如下表所示.读者可以根据实际需求灵活地做出多种选择. HTML DOM结构如下: <p class

  • 浅谈jQuery 选择器和dom操作

    浅谈jQuery 选择器和dom操作 JQuery选择器 1.基本选择器 基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素id.class 和标签名来查找DOM元素.这个非常重要,下面的内容都是以此为基础,逐级提高的. 1)."$("#id")",获取id指定的元素,id是全局唯一的,所以它只有一个成员. 2)."$(".class")",获取class指定的元素,不同的元素可以具有相同的class属性

  • JQuery 选择器、DOM节点操作练习实例

    JQuery 选择器、DOM节点操作练习实例

    一.练习一 1.需求效果分析: 2.代码示例: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script s

  • JQuery查找DOM节点的方法

    本文实例讲述了JQuery查找DOM节点的方法.分享给大家供大家参考.具体分析如下: DOM操作是JQuery最常见的用法,下面我们来将JQuery的DOM操作逐个剖析下.先来最简单的查找节点操作. 为了能全面地讲解DOM操作,首先需要构建一个网页.因为每一张网页都能用DOM表示出来,而每一份DOM都可以看作一棵DOM树.HTML代码如下: <p class="nm_p" title="欢迎访问我们" >欢迎访问我们</p> <ul c

  • jQuery 中DOM 操作详解

    jQuery 中DOM 操作详解

    jQuery 中的 DOM 操作 DOM(Document Object Model-文档对象模型):一种与浏览器,平台, 语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件 DOM 操作的分类: DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM的程序设计语言都可以使用它. 它的用途并非仅限于处理网页,也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML HTML DOM: 使用 JavaScript和 DOM 为 HTML文

  • jQuery DOM插入节点操作指南

    方法 描述 示例 append() 向每个匹配的元素内部追加内容 HTML代码:<p>我想说:</p> jQuery代码: $("p").append("<b>你好</b>"); 结果: <p>我想说:<b>你好</b></p> appendTo() 将所有匹配的元素追加到指定的元素中 .实际上,使用该方法是颠倒了常规 的$(A).append(B)的操作,是将A追加到B

  • jQuery DOM删除节点操作指南

    jQuery DOM删除节点操作指南

    下面示例可能用到如下HTML代码: 复制代码 代码如下: <ul>   <li title="t1">苹果</li>   <li>香蕉</li>   <li>橘子</li>   <li>葡萄</li>   <li>草莓</li> </ul> 1.remove()方法: 作用:从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛

  • JS实现的DOM插入节点操作示例

    JS实现的DOM插入节点操作示例

    本文实例讲述了JS实现的DOM插入节点操作.分享给大家供大家参考,具体如下: 一 介绍 插入节点通过使用insertBefore()方法来实现. insertBefore()方法将在另一个子节点前插入新的子节点. obj.insertBefore(new,ref) new:表示新的子节点. ref:指定一个节点,在这个节点前插入新的节点. 二 应用 插入节点,本示例在页面的文本框中输入需要插入的文本,然后通过单击"前插入"按钮将文本插入到页面中. 三 完整示例代码: <!DOCT

  • JS实现DOM删除节点操作示例

    JS实现DOM删除节点操作示例

    本文实例讲述了JS实现DOM删除节点操作.分享给大家供大家参考,具体如下: 一 介绍 删除节点通过使用removeChild()方法来实现. removeChild()方法用来删除一个子节点. obj. removeChild(oldChild) oldChild:表示需要删除的节点. 二 应用 删除节点,本示例将通过DOM对象的removeChild()方法,动态删除页面中所选中的文本. 三 代码 <!DOCTYPE html> <html> <head> <t

  • jQuery DOM节点的遍历方法小结

    本文介绍了jQuery DOM节点的遍历方法小结,分享给大家,也给自己留个笔记 children()方法 jQuery是一个合集对象,如果想快速查找合集里面的第一级子元素,此时可以用children()方法.这里需要注意:.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈,这里可以理解为就是父亲-儿子的关系) 节点查找关系 <div class="div"> <ul class="son"> <

  • JavaScript之DOM插入更新删除_动力节点Java学院整理

    JavaScript之DOM插入更新删除,供大家参考,具体内容如下 更新 拿到一个DOM节点后,我们可以对它进行更新. 可以直接修改节点的文本,方法有两种: 一种是修改innerHTML属性,这个方式非常强大,不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段修改DOM节点内部的子树: // 获取<p id="p-id">...</p> var p = document.getElementById('p-id'); // 设置文本为abc: p.

  • jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)

    jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)

    本文实例讲述了jQuery插入节点和移动节点的方法.分享给大家供大家参考,具体如下: 1. 插入节点: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" ty

  • jQuery与JavaScript节点创建方法的对比

    一. 创建节点: 节点是DOM结构的基础,根据DOM规范,节点是一个很宽泛的概念,包含元素.属性.文本.文档和注释.但在实际开发中,要动态创建内容,主要操作的节点包括元素.属性和文本. 1.需求:创建一个h1 标签,把它作为div元素的子节点添加到DOM节点树中. 2.基本思路是:先创建一个h1元素对象,然后添加到文档中. 3.以下是两种实现方式: // jQuery方式 var $h1 = $("<h1 title='创建节点' class='head'>jQuery与JavaSc

  • jQuery Dom元素操作技巧

    Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM操作可以分为三个方面即DOM Core(核心).HTM-DOM和CSS-DOM. jquery 获取父节点,兄弟节点,在节点内插入内容. ①$("#test1").parent() // 父节点 ②$("#test1").next() //下一个节点 ③$("#test1").

  • jQuery简单创建节点的方法

    jQuery简单创建节点的方法

    本文实例讲述了jQuery简单创建节点的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-1

随机推荐