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步骤节点进度条代码
jQuery步骤节点进度条代码基于jquery.1.10.2.min.js制作,募捐步骤流程代码。
javascript和jquery和节点
本文详细介绍下js和jquery对dom节点的操作包括创建、追加等等,感兴趣的朋友可以参考下哈,希望对你有所帮助
jQuery动态添加节点循环流程图表代码
本套Java视频教程循序渐进地对jQuery的各种选择器、函数和方法调用进行了详细的讲解,更结合了大量的案例进行分析。001_动力节点_jQuery视频 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
JS原生判断DOM节点是否存在页面中 JavaScript原生函数没有提供判断DOM节点是否存在方法,我们通常获取DOM节点几乎都是document.getElement..方法,会返回一个object数组合集,我们可以通过object[0],object[1]这样...
动力节点ssm框架视频及讲义,javascript+jquery+ajax视频
jquery实现递归tr子节点
用Jquery模仿AngularJs主页的ToDoList功能
包括js与jquery的节点获取,文本获取,属性添加,属性修改。节点的添加删除。批量选择,双击栏目左右移动。
jQuery节点分布圆形循环信息展示是一款可以设置自动循环播放信息,也可以让用户手动点击展示信息。
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库...它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
在这个节点和事件案例中包含了 3 个基础案例,分别是 固定导航栏、雪花特效、点击特效案例。某些图片可能套用了别人的图片,所有代码是原创。配套课件 https://blog.csdn.net/qq_32466937/article/details/105515500
jQuery ui基于myflow.js绘制流程图插件,自定义组织架构图图表,拖拽绘制组织架构图表代码,支持分支、节点状态工作流程图表样式代码
2. jQuery 对象和 DOM 对象 3. 基本选择器 4. 层次选择器 5. 基本过滤选择器 6. 内容过滤选择器 7. 可见性过滤选择器 8. 属性过滤选择器 9. 子元素过滤选择器 10. 表单元素过滤选择器 11. 小结1 12. 选择器练习 13....
jquery.json-viewer.js是一款查看json格式数据的jquery插件。它可以将混乱的json数据漂亮的方式展示在页面中,并支持节点的伸展和收缩和语法高亮等功能。
本文实例讲述了JQuery查找DOM节点的方法。分享给大家供大家参考。具体分析如下: DOM操作是JQuery最常见的用法,下面我们来将JQuery的DOM操作逐个剖析下。先来最简单的查找节点操作。 为了能全面地讲解DOM操作,首先...