`

jquery-dom操作外部插入节点

 
阅读更多
外部插入是将content插入到selector节点外部,包括selector节点的前面和后面。插入后的节点与原节点是兄弟关系

1.after() 选元素之后插入内容。
2.insetAfter() 与after对应。
3.before() 被选元素之前插入内容。
4.insertBefore() 与before对应。

$("#btn1").click(function(){
    $("p").before("<b>Before</b>");
    //$("<b>Before</b>").insertBefore("p");
  });

  $("#btn2").click(function(){
    $("p").after("<i>After</i>");
    //$("<i>After</i>").insertAfter("p");
}

<p>段落1</p>
<button id="btn1">Insert before</button>
<button id="btn2">Insert after</button>


运行结果如下:
  • 大小: 5.9 KB
分享到:
评论

相关推荐

    14jQueryDOM节点操作.docx

    在JavaScript和jQuery的世界里,DOM(Document Object Model)节点操作是网页动态交互的核心技术。DOM是一种树状结构,它代表了HTML或XML文档的结构,允许我们通过编程方式访问和修改文档内容。jQuery库简化了对DOM...

    jQury-DOM篇学习笔记

    jQuery DOM篇的学习主要涵盖了解DOM(Document Object Model)节点的创建、插入、删除以及相关的操作方法。DOM是HTML和XML文档的结构化表示,通过DOM,我们可以方便地访问和修改文档内容。 首先,jQuery提供了简便...

    jQuery DOM插入节点操作指南

    jQuery提供了一整套的DOM插入节点操作方法,每种方法根据其插入位置的不同而具有不同的用途。`append()`与`prepend()`分别用于元素的内部末尾和内部开头插入,而`after()`与`before()`用于元素的外部后和外部前插入...

    jQuery中DOM常见操作实例小结

    ### jQuery中DOM常见操作实例小结知识点 #### DOM属性操作 1. **设置或返回元素属性:** - `attr(name, value|fn)`:可以用来获取或设置属性值。如果提供值,它会设置属性;如果提供函数,那么会在每个匹配元素上...

    Jquery节点插入、复制和替换方法

    ##### 外部插入节点 外部插入是指在目标元素外部进行新节点的添加,即在目标元素的前后添加新的节点。同样有两种方法: - **before(content)**:此方法会在每个匹配元素之前插入内容。 - 例如: ```javascript ...

    jQuery学习之DOM节点的插入方法总结

    《jQuery学习之DOM节点的插入方法总结》 在JavaScript的世界里,jQuery库为开发者提供了更加简洁易用的API,使得DOM操作变得简单高效。本文主要聚焦于jQuery中DOM节点的插入方法,帮助开发者掌握如何优雅地在文档中...

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

    jQuery作为前端开发中常用的JavaScript库,提供了丰富的API来操作DOM(文档对象模型),其中移动和复制DOM节点是常见的需求。本文将详细介绍jQuery中移动和复制DOM节点的实用案例。 首先,我们需要了解在jQuery中...

    使用jQuery操作DOM的方法小结

    3. 插入节点:可以使用append(content)、prepend(content)、after(content)和before(content)等方法来向选定元素的内部或外部插入内容。 4. 删除节点:remove()方法可以从DOM中删除被选元素。 5. 替换节点:...

    jQuery权威指南-源代码

    3.4.2 外部插入节点方法/64 3.5 复制节点/66 3.6 替换节点/68 3.7 包裹节点/69 3.8 遍历元素/71 3.9 删除元素/73 3.10 综合案例分析—数据删除和图片预览在项目中的应用/75 3.10.1 需求分析/75 3.10.2 效果...

    jquery对dom节点的操作【推荐】

    接下来,我们进入jquery对DOM节点操作的具体内容。jquery提供了一整套选择器和方法,使得DOM操作变得非常简单。 1. children()方法用于遍历DOM树,搜索指定元素的直接子节点。它仅在DOM树中向下遍历一层,适用于...

    jQuery添加删除DOM元素方法详解

    它提供了基本的接口,如获取节点列表、创建节点、插入节点等。例如,使用document.getElementsByTagName("form")就是用DOM Core获取表单对象的一个常用方法。 HTML-DOM是基于DOM Core的一个分支,提供了一些更为...

    jquery1.4.2库 jquery1.4.2中文参考手册

    1. 插入:jQuery提供了方便的插入方法,如".before()", ".after()", ".append()", 和 ".prepend()",可实现元素在DOM树中的增删改。 2. 删除:".remove()"方法用于移除元素,".empty()"则清空元素内的所有子节点。 3...

    jQuery和JavaScript节点插入元素的方法对比

    对于节点外部插入,jQuery提供以下两个方法: 5. `after()`:此方法会在每个匹配元素之后插入内容,如`$("div").after("这是after()方法添加的内容&lt;/p&gt;")`会在每个`&lt;div&gt;`元素后面插入一个`&lt;p&gt;`元素。 6. `before...

    JQuery常见节点操作实例分析

    以下将详细探讨JQuery中的节点操作,包括插入节点和删除节点的方法和技巧。 ### 插入节点 JQuery提供了多种方法用于在页面上的元素之间插入新创建的HTML元素或者现有的元素。 - **append() 和 appendTo()**:这两...

    利用jquery以及ajax实现树结构

    - DOM操作:jQuery提供了方便的API来选择、操作DOM元素,如`$(selector)`用于选择元素,`.addClass()`、`.removeClass()`等方法用于改变元素样式。 - 事件处理:使用`.on()`方法可以绑定各种事件,如点击、鼠标...

    锋利的jQuery jQuery中的DOM操作

    标题中提到的知识点是关于jQuery中的DOM操作。DOM(文档对象模型)操作是编程语言中处理XML或HTML文档的标准编程接口。而jQuery是一个快速、小巧且功能丰富的JavaScript库,通过简化HTML文档遍历和事件处理以及AJAX...

    JQuery1.6.1API

    - `.append()`, `.prepend()`, `.before()`, `.after()`: 这些方法用于在DOM结构中插入元素,1.6.1版增强了插入效率和稳定性。 6. **AJAX** - `.ajax()`: 核心的异步请求方法,1.6.1版优化了请求处理流程,提供了...

    韩顺平PHP JS JQUERY 所有视频下载种子 货真价实

    10-27 2 jquery的dom操作 内部插入 外部插入 10-27 3 jquery节点操作 10-27 4 练习题讲解 10-27 5 jquery属性操作 获取子元素和兄弟元素的方法 10-27 6 练习题讲解 10-27 7 jquery和ajax整合使用的方法 10-29 1 svn...

    jQuery权威指南366页完整版pdf和源码打包

    3.4.1 内部插入节点方法 3.4.2 外部插入节点方法 3.5 复制节点 3.6 替换节点 3.7 包裹节点 3.8 遍历元素 3.9 删除元素 3.10 综合案例分析—数据删除和图片预览在项目中的应用 3.10.1 需求分析 ...

    关于DOM操作的实例

    `createElement()`创建新的DOM节点,`appendChild()`将新节点添加到父节点的末尾,而`insertBefore()`则可在指定子节点之前插入新节点。 例如: ```javascript let newElement = document.createElement('div'); ...

Global site tag (gtag.js) - Google Analytics