jQuery和JavaScript节点插入元素的方法对比
二、插入元素：
<div> <p>面朝大海，春暖花开</p> </div>
(一)、jQuery方法
1、在节点内部插入:
|
方法 |
说明 |
|
append() |
向每个匹配的元素内部追加内容 |
|
appendTo() |
把所有的元素追加到另一个指定的元素集合中，实际上是颠倒了append()的用法。如$(A).append(B)与$(B).appendto(A)是等价的 |
|
prepend() |
向每个匹配的元素内部前置内容 |
|
prependTo() |
把所有匹配的元素前置到另一个指定的元素集合中。实际上是颠倒了preprend()的用法。如$(A).prepend(B)与$(B).prenpendTo(B)等价 |
具体实现如下：
$("div").append("<p>这是append()方法添加的内容</p>");//在div元素下第一个子节点位置插入段落
$("div").prepend("<p>这是prepend()方法添加的内容</p>");//在div元素下最后一个子节点位置插入段落
下面这两种方法更符合人的一般思维，但效果是一样的
$("<p>这是appendTo方法添加的内容</p>").appendTo("div");//把段落插到div元素的第一个子节点位置
$("<p>这是prependTo方法添加的内容</p>").prependTo("div");//把段落插到div元素的最后一个子节点位置
2、在节点外部插入:
|
方法 |
说明 |
|
after() |
在每个匹配的元素之后插入内容 |
|
before() |
在每个匹配的元素之前插入内容 |
|
insertAfter() |
把所有匹配的元素插入到另一个指定的元素集合的后面 |
|
insertBefore() |
把所有匹配的元素插入到另一个指定的元素集合的前面 |
具体实现如下：
$("div").after("<p>这是after()方法添加的内容</p>");//在div元素后面插入段落
$("div").before("<p>这是before()方法添加的内容</p>");//在div元素前面插入段落
$("div").after("<p>这是after()方法添加的内容</p>");//在div元素后面插入段落
$("div").before("<p>这是before()方法添加的内容</p>");//在div元素前面插入段落
3、appendTo(),prependTo(), insertBefore(),insertAfter() 方法具有破坏性操作特性，也就是如果选择已经存在内容，并把它们插入到指定对象中时，则原位置的内容将被删除。下面实例中将原div元素中包含的段落文本选中并移到div元素后面。演示如下：
$("p").insertAfter("div");
(二)、JavaScript方法
1、在节点内部插入：appendChild()—--对应于jQuery的append(), insertBefore()---对应于jQuery中的prepend()
具体效果请看上面jQuery方法。。。
2、自定义JavaScript扩展DOM功能函数================待续~待续~待续
以上就是本文内容，希望对大家有所帮助，谢谢对脚本之家的支持！
- javascript与jquery动态创建html元素示例
- js jquery获取当前元素的兄弟级 上一个 下一个元素
- js与jquery获取父元素,删除子元素的两种不同方法
- JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
- js与jquery获取父级元素,子级元素,兄弟元素的实现方法
- jQuery下实现等待指定元素加载完毕(可改成纯js版)
- js jquery 获取某一元素到浏览器顶端的距离实现方法
- JS加jquery简单实现标签元素的显示或隐藏
- JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
- jquery和javascript中如何将一元素的内容赋给另一元素
- jQuery与javascript对照学习 获取父子前后元素 实现代码
- jQuery与原生JavaScript选择HTML元素集合用法对比分析
相关文章
这篇文章主要介绍了JavaScript axios安装与封装案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
一文详解JavaScript 如何将 HTML 转成 Markdown
这篇文章主要介绍了一文详解JavaScript如何将HTML转成Markdown，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
js中使用DOM复制（克隆）指定节点名数据到新的XML文件中的代码
使用DOM复制（克隆）指定节点名数据到新的XML文件中 ,用到三个类的相关知识点 ： DOMDocument - DOMNodeList - DOMNode2011-07-07
JavaScript代码压缩对代码进行一系列优化处理,从而减小代码的体积,提高网页的加载速度,JavaScript代码压缩的原理包含去除代码中的空格、注释、不必要的换行符等无用字符,压缩变量名、压缩函数名等操作,将一些常见的操作(如+、-、*、/)转换成更短的操作符(如@、^、#、|)2023-12-12
用javascript+jquery写的一个定时器，定时修改文章标题,需要的朋友可以参考下2014-03-03
这篇文章主要介绍了分享JavaScript 类型判断的几种方法，文章围绕主题展开详细的内容介绍，具有一定的的参考价值，需要的小伙伴可以参考一下2022-05-05
单击某一段文字，改文字变为红色，再次单击之后，文字又变回黑色，示例如下,需要的朋友可以参考下2014-06-06
在Webpack中用url-loader处理图片和字体的问题
这篇文章主要介绍了在Webpack中用url-loader处理图片和字体的问题及解决方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
这篇文章主要为大家详细介绍了TypeScript的类型注解，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要为大家详细介绍了微信小程序实现消息框弹出动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
最新评论