append、appendTo、prepend、prependTo、before、insertBefore、after、insertAfter、replaceAll方法被调用后，原本在页面上显示的元素会消失
详细描述：
$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方法被调用后，原本在页面上显示的元素会消失的更多相关文章
- jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之间的区别
jQuery中有一个很关键的元素操作,他们的使用方法都一样,但是呈现的结果有所不同. <!DOCTYPE html> <html lang="en"> &l ...
- 关于append，appendTo,prepend,prependTo的区别
之前做项目对于这几个的方法总是有点模糊,尤其是prepend和prependTo; 1.append <style> span{ background:yellow; } .test{ b ...
- after()和append()的区别、before()和prepend()区别、appendTo()和prependTo()、insertAfter()和insertBefore()
一.after()和before()方法的区别 after()——其方法是将方法里面的参数添加到jquery对象后面去: 如:A.after(B)的意思是将B放到A后面去: before( ...
- jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法)
jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法) ---------- 如果想把内容添加到现有内容末尾,可以利用append()命令.append()命令语 ...
- jquery：after append appendTo三个函数的区别
1.查找元素节点 var $li = $(“ul li:eq(0)”);//获取ul标记下的第一个li,也可以写成 $(“#ulID li:eq(0)”); 2.查找元素属性 利用jq ...
- jQuery中的文档操作处理（五）：append()、prepend()、after()、before()、wrap()、wrapAll()、wrapInner()、clone()等
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- jquery中append跟prepend的用法
jquery中append和prepend的用法 append 是插入到元素中,并放到元素内的最后面prepend 是插入到元素中,并放到元素内的最前面例$("body"). ...
- JQuery中after() append() appendTo()的区别
首先 after() 是追加在元素外边而append() appendTo()是追加在元素里面. $(selector).after(content) $("span").afte ...
- 比较jquery中的after(),append(),appendTo()方法
html页面: <p id="myp1">我的兴趣爱好是:</p> <button id="b1">after函数</ ...
随机推荐
- Linux是cat、tail、head查看文件任意几行的数据
Linux是cat.tail.head查看文件任意几行的数据 一.使用cat.tail.head组合 1.查看最后100行的数据 cat filename | tail -n 100 2.查看100到 ...
- 16.3-uC/OS-III同步 （事件标志组实验）
事件标志组,顾名思义,就是若干个事件标志的组合,代表若干个事件是否发生,通常用于集合两个或两个以上事件的状态 . 1.如果想要使用事件标志组,就必须事先使能事件标志组.消息队列的使能位于“os_cfg ...
- CSS中list-style详解
取消默认的圆点和序号可以这样写list-style:none;, list的属性如下: list-style-type:square;//正方形 list-style-position:inside; ...
- FastDFS的单点部署
1 安装libfastcommon 注意:在Centos7下和在Ubuntu下安装FastDFS是不同的,在Ubuntu上安装FastDFS需要安装libevent,而外Centos上安装FastD ...
- JDK 1.8源码阅读 LinkList
一,前言 LinkedList是一个实现了List接口和Deque接口的双端链表.有关索引的操作可能从链表头开始遍历到链表尾部,也可能从尾部遍历到链表头部,这取决于看索引更靠近哪一端. LinkedL ...
- python常用函数及模块
原文来源于博客园和CSDN 1.计算函数 abs()--取绝对值 max()--取序列最大值,包括列表.元组 min()--取序列最小值 len()--取长度 divmod(a,b)---取a//b除 ...
- 深入理解Java虚拟机1-chap1-2-斗之气8段
1.HotSpot VM:热点代码探测能力,与JIT技术共同进行编译优化,输出高质量代码 2.运行时数据区域 程序计数器:控制程序执行顺序,无OOM Java虚拟机栈:生命周期与线程一致,描述Java ...
- Java项目中的异常处理情况
1. java.lang.nullpointerexception这个异常大家肯定都经常遇到,异常的解释是"程序遇上了空指针",简单地说就是调用了未经初始化的对象或者是不存在的对象 ...
- js对象添加动态属性
在业务中,经常会遇到使用同个方法调用多个同类型接口,以下简单模拟两个API接口 // api-1 { code: 0, status: 200, title: 'web前端框架', list: [ { ...
- 框架——flask知识点回顾
1. flask--轻量级Web开发框架 2. Flask 没有默认使用的数据库,你可以选择 MySQL,也可以用 NoSQL 3. Web程序框架的意义: 用于搭建Web应用程序 免去不同Web应用 ...