详细描述：

　　$ele.append、.appendTo、.prepend、.prependTo、.before、.insertBefore、.after、.insertAfter、.replaceAll  这些方法调用之后，如果被添加的那个对象是页面上原有的对象，当调用这些方法后，原有的那个对象会消失，在新的地方出现（注意：这里的对象是jQuery对象）

现象：

　　代码：

<body>

        <ul>

            <li>num:1</li>

            <li>num:2</li>

            <li>num:3</li>

            <li>num:4</li>

            <li>num:5</li>

        </ul>

        <script>

            var $li = $("<span>~~标签~~</span>")

            $li.appendTo($("li"));

            $("li:gt(2)").append($li);

        </script>

    </body>

　　

　　问题：

　　　　为什么num5后面没有添加两个span标签

　　原因：

　　　　$ele.append、appendTo、prepend、prependTo、before、insertBefore、after、insertAfter、replaceAll
　　　　如果被添加的那个对象是页面上原有的对象，当调用这些方法后，原有的那个对象会消失，在新的地方出现（注意：这里的对象是jQuery对象）

　　解决方法：

1.第一行：创建标签；第二行：将标签封装成jQuery对象并添加；第三行：将标签直接添加到对应的jQuery对象中

    var li = "<span>~~标签~~</span>";

    $(li).appendTo($("li"));

     $("li:gt(2)").append(li);

2.第一行：创建一个jQuery对象；第二行：将对象添加；第三行：给$li重新赋值，值为一个未在页面上显示的对象（因此不考虑消失的问题）；第四行：将重新赋值的$li进行添加操作

    var $li = $("<span>~~标签~~</span>");

    $li.appendTo($("li"));

    $li = $("<span>~~标签~~</span>");

    $("li:gt(2)").append($li);

append、appendTo、prepend、prependTo、before、insertBefore、after、insertAfter、replaceAll方法被调用后，原本在页面上显示的元素会消失的更多相关文章

  1. jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之间的区别

    jQuery中有一个很关键的元素操作,他们的使用方法都一样,但是呈现的结果有所不同. <!DOCTYPE html> <html lang="en"> &l ...

  2. 关于append，appendTo,prepend,prependTo的区别

    之前做项目对于这几个的方法总是有点模糊,尤其是prepend和prependTo; 1.append <style> span{ background:yellow; } .test{ b ...

  3. after()和append()的区别、before()和prepend()区别、appendTo()和prependTo()、insertAfter()和insertBefore()

    一.after()和before()方法的区别 after()——其方法是将方法里面的参数添加到jquery对象后面去:    如:A.after(B)的意思是将B放到A后面去:    before( ...

  4. jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法)

    jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法) ---------- 如果想把内容添加到现有内容末尾,可以利用append()命令.append()命令语 ...

  5. jquery：after append appendTo三个函数的区别

    1.查找元素节点      var $li = $(“ul li:eq(0)”);//获取ul标记下的第一个li,也可以写成 $(“#ulID li:eq(0)”);    2.查找元素属性 利用jq ...

  6. jQuery中的文档操作处理（五）：append()、prepend()、after()、before()、wrap()、wrapAll()、wrapInner()、clone()等

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  7. jquery中append跟prepend的用法

    jquery中append和prepend的用法 append   是插入到元素中,并放到元素内的最后面prepend  是插入到元素中,并放到元素内的最前面例$("body"). ...

  8. JQuery中after() append() appendTo()的区别

    首先 after() 是追加在元素外边而append() appendTo()是追加在元素里面. $(selector).after(content) $("span").afte ...

  9. 比较jquery中的after(),append(),appendTo()方法

    html页面: <p id="myp1">我的兴趣爱好是:</p> <button id="b1">after函数</ ...

随机推荐

  1. winfrom弹出窗口用timer控件控制倒计时20秒后关闭

    功能描述: 因为在程序退出时需要确认是否是误操作,所以加了密码输入的子窗体,子窗体在20秒内会自动关闭 代码如下: private int count; private void Form2_Load ...

  2. Spring Data JPA框架

    1.前言 扔一个 spring data jpa 的代码,可运行,后续补充博客内容. 环境:eclipse + tomcat8 2.部分截图 3.源码 https://gitee.com/niceyo ...

  3. OCP-第三节课.md

    一. dataguard  stream  字节流技术: 二. 突然断电:触发实例恢复过程: 三. 宕机:赔钱 四. Redis.MQ(消息中间件.队列管理器.缓存)(内存数据库) 五. IBM MQ ...

  4. autoMapper的介绍

    .NET的DTO映射工具AutoMapper 分类: 多层架构 DTO .NET2012-08-11 10:27 2466人阅读 评论(0) 收藏 举报 原文:https://github.com/A ...

  5. 家庭记账本之微信小程序（六）

    Wxss的学习 WXSS(WeiXin Style Sheets)是一套样式语言,用于描述WXML的组件样式. WXSS用来决定WXML的组件应该怎么显示. 为了适应广大的前端开发者,我们的WXSS具 ...

  6. javaScript核心基础

    JavaScript 是属于网络的脚本语言! JavaScript 作用:被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies(js也可创建cookie,在浏览器里面创建),以及更多 ...

  7. 58.Less介绍及其与Sass的差异

    Less英文官网需要开启VPN才能正常访问,如果你无法打开Less官网,建议您移步到Alexis Sellier领导的团队所译的中文官网Less中文. ——大漠 事实证明,Less——以及Sass对于 ...

  8. HBase 笔记1

    cap理论: 一致性  可用性   可靠性 任何分布式系统只能最多满足上面2点,无法全部满足 NOSQL  = Not Only SQL = 不只是SQL HBase速度并不快,知识当数据量很大时它慢 ...

  9. beego 初体验 - 基础模块 - config, httplibs, logs

    beego 的基础模块支持了一些web开发常用的功能. 配置,http操作库,日志 配置模块: 这是我的配置文件 如何读取: httplibs:这是一个利用 httplibs 发起 get 请求的示例 ...

  10. ch01 PHP开篇

    ch01 PHP开篇 1.1启蒙知识 思考:WAMP是什么?:集成开发环境 [Windows+Apache服务器+MySQL数据库+PHP编程] 1.1.1 站点 将网站所有相关素材都放到一个文件夹中 ...