`

Js和jQuery对节点的操作

    博客分类:
  • Java
阅读更多

Js和jQuery对节点的操作

 

一.jQuery增加前后节点

1.jsp:

 

<p id="myNode">Hello World</p>
<button onclick="afterNode()">
    	后加节点
</button>
<button onclick="beforeNode()">
    	前加节点
</button>

 

2.js:

//前面增加
function beforeNode() {
	$("#myNode").before('<p>Before Hello World</p>');
}

//后面增加
function afterNode() {
	$("#myNode").after('<p>AfterHello World</p>');
}
3.结果:
//前加结果:
<p>Before Hello World</p>
<p id="myNode">Hello World</p>


//后加结果
<p id="myNode">Hello World</p>
<p>After Hello World</p>
 

二.jQuery在节点内部最后增加节点:

1.jsp:

<p id="myNode">Hello World</p>
<p id="myNode">Hello World</p>
<button onclick="prependNode()">
    	内部最前加节点
</button>
<button onclick="appendNode()">
    	内部最后加节点
</button> 

 

2.js:

//内部最后增加
function appendNode() {
	$("#myNode").append('<b>Append Hello World</b>');
        //反向增加:
        //$("<b>你好吗?</b>").prependTo("p");//将《b》前置到p元素中 
}
//内部最前增加
function prependNode() {
	$("#myNode").prepend('<p>Prepend Hello World</p>');
        //反向增加
        //$("<b>你好吗?</b>").appendTo("p");//将《b》前置到p元素中 
}

 

3.结果:

//内部最前加节点结果:
<p id="myNode">
    <b>Prepend Hello World</b>
    Hello World
</p>

//内部最后加节点结果:
<p id="myNode">
    Hello World
    <b>Append Hello World</b>
</p>

 

 

三.替换节点:

// $("p").replaceWith("<strong>你最不喜欢的水果是?</Strong>");

 

 

参考:http://www.jb51.net/article/41130.htm

分享到:
评论

相关推荐

    jquery插入节点.

    总之,jQuery的节点插入功能极大地简化了JavaScript中的DOM操作,使得开发者能够更加专注于业务逻辑,而不是被繁琐的DOM操作所困扰。通过熟练掌握这些方法,你可以更高效地构建动态和交互性强的Web应用。在实践中...

    jQuery DOM节点操作源码

    jQuery 是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。在"jQuery DOM节点操作源码"中,我们可以深入理解jQuery是如何优雅地处理DOM(Document Object Model)节点的...

    jQuery带节点步骤进度条插件.zip

    通过使用jQuery,开发者可以更高效地编写JavaScript代码,因为jQuery提供了一套简洁的API来处理常见的DOM操作。 在这款插件中,"步骤进度条"是一个关键元素。它通常由一系列的节点或步骤组成,每个节点代表流程中的...

    jQuery步骤节点进度条代码

    `$('.step')`和`$('progress')`是jQuery选择器,用于获取HTML中的步骤节点和进度条元素。`.eq()`用于选取指定索引的元素,`.addClass()`和`.removeClass()`用来切换类名,`.val()`设置进度条的值。 总的来说,...

    jQuery第4天知识点:jQuery节点操作、jQuery特殊属性操作、jQuery事件机制.zip

    一、jQuery节点操作 1. 选择器:jQuery提供了丰富的选择器,如ID选择器(#id)、类选择器(.class)、元素选择器(element)等,用于快速定位DOM元素。例如,`$("#myID")`将选取ID为"myID"的元素。 2. 获取和设置节点:`...

    jquery包裹节点

    在jQuery库中,"包裹...总的来说,jQuery的包裹节点功能是网页动态布局和交互设计中的强大工具,它简化了DOM操作,提高了开发效率,让前端开发更加便捷。熟练掌握这些方法,对于任何jQuery开发者来说都是至关重要的。

    14jQueryDOM节点操作.docx

    2. **jQuery节点的插入** - **内部插入**:`append()`和`appendTo()`用于在元素内部添加内容。它们的主要区别在于调用方式,`append()`将内容添加到选择的元素内部,而`appendTo()`则是将选择的元素添加到另一个...

    jQuery 1.5 遍历xml节点属性

    本文将详细讲解如何在jQuery 1.5版本中遍历XML节点属性,结合给定的资源——一个名为"test.html"的HTML文件和"jquery-1.5.js"的jQuery库。 首先,理解XML(Extensible Markup Language)是一种标记语言,用于存储和...

    jquery-3.5.1.min.js_jquery-3.5.1.min.js_jquery_

    jQuery的3.5.1版本是其历史发展的一个重要节点,它在保持稳定性和兼容性的同时,也引入了一些改进和修复。这个版本修复了之前版本中的一些已知问题,提高了代码的执行效率,并对API进行了优化,为开发者提供了更流畅...

    jquery 进度 节点 样式

    本篇文章将详细探讨jQuery在处理进度节点和样式方面的方法和技巧,帮助开发者更好地理解和应用这一功能强大的库。 首先,我们要明白“进度”通常指的是在执行某些任务或操作时,展示其完成度的一种可视化表示。在...

    JQuery常见节点操作实例分析

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

    jquery替换节点

    在jQuery库中,替换节点是常见的DOM操作之一,它允许我们用新的元素替换现有元素,以更新或修改页面上的HTML结构。在这个主题中,我们将深入探讨jQuery中的几个关键方法,如`.replaceWith()`、`.replaceAll()`以及...

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

    ### Jquery节点插入、复制和替换方法 #### 一、插入 在JQuery中,提供了多种方式来插入新的DOM节点,这些方法可以帮助开发者更灵活地操作网页结构。 ##### 内部插入节点 内部插入指的是在目标元素内部进行新节点...

    jquery遍历节点树

    了解并熟练运用这些jQuery节点遍历方法,能够极大地提高开发效率,使代码更加简洁易读。在处理大型、复杂的DOM结构时,合理地遍历节点树显得尤为重要。 在提供的压缩包文件"3-11遍历节点树"中,可能包含了一个示例...

    jQuery动态添加节点循环流程图表代码.zip

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本资源“jQuery动态添加节点循环流程图表代码”提供了利用jQuery实现动态添加节点并创建循环流程图表的方法...

    jQuery步骤节点进度条代码.zip

    在IT行业中,jQuery是一种广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。...同时,对于初学者,这是一次很好的实践机会,可以加深对jQuery和前端开发的理解。

    jQuery插入节点1

    在本文中,我们将详细介绍 jQuery 中的插入节点方法,包括创建节点、插入节点、删除节点、克隆节点、替换节点和包裹节点等。 创建节点 在 jQuery 中,可以使用工厂函数 `$()` 来创建节点。例如,`$("&lt;p&gt;")` 将创建...

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

    本文将详细介绍JavaScript和jQuery在DOM节点操作方面的一些技巧和实践,重点放在节点的创建和追加操作上。 ### JavaScript和jQuery的介绍 - **JavaScript**:是一种直译式脚本语言,广泛用于客户端的网页中。它...

    javascript和jquery和节点

    在JavaScript和jQuery中,节点操作是实现动态效果和交互的核心。例如,可以使用`appendChild()`添加新元素,`removeChild()`移除元素,`innerHTML`属性修改元素内容,`style`对象改变元素样式,以及`...

    jQuery+Asp.net 操作XML文件添加、编辑、删除节点源码例子

    首先,jQuery是一个轻量级的JavaScript库,提供了简洁的API来处理DOM操作、事件处理、动画效果以及Ajax请求。在本示例中,jQuery主要负责用户界面的交互,如点击按钮触发相应的函数,获取用户输入,以及更新页面显示...

Global site tag (gtag.js) - Google Analytics