`

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
分享到:
评论

相关推荐

    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 效果...

    韩顺平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 需求分析 ...

    超实用的jQuery代码段

    2.5 插入节点元素 2.6 复制节点元素 2.7 替换节点元素 2.8 删除节点元素 2.9 为元素绑定事件 2.10 如何从元素中除去HTML标签 2.11 如何限制文本域中字符的个数 2.12 如何选中页面上的所有复选框 2.13 禁用表单的回车...

    jquery插件使用方法大全

    ·attribute(改进了.attr()的性能)、jQuery()核心函数、CSS(.css()性能有两倍提升)、特效和事件、DOM操作等也有显著改进 1.5 美国时间1月31日John Resig在jQuery官方博客发表文章,宣布jQuery 1.5正式版已经...

    (全)传智播客PHP就业班视频完整课程

    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...

    史上最全韩顺平传智播客PHP就业班视频,10月份全集

    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...

    史上最全传智播客PHP就业班视频课,8月份视频

    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...

    史上最全韩顺平传智播客PHP就业班视频,9月份全集

    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...

    JavaScript基础教程第8版

    10.5 插入节点 197 10.6 替换节点 199 10.7 用对象字面值编写代码 202 第11章 建立动态页面 206 11.1 在网页上显示当前日期 206 11.2 处理周中的日期 208 11.3 根据时间对消息进行定制 209 11.4 ...

    用JQUERY增删元素的代码

    主要分为内部插入,外部插入,包裹,替换,删除。内部插入主要方法:append(content) 向每个匹配的元素内部追加内容。prepend(content) 向每个匹配的元素内部前置内容。外部插入:after(content) 在每个匹配的元素...

Global site tag (gtag.js) - Google Analytics