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函数</ ...
随机推荐
- PyQt5信号、定时器及多线程
信号 信号是用于界面自动变化的一个工具,原理是信号绑定了一个函数,当信号被触发时函数即被调用 举个例子 from PyQt5 import QtWidgets,QtCore from untitled ...
- java框架之Hibernate(3)-一对多和多对多关系操作
一对多 例:一个班级可以有多个学生,而一个学生只能属于一个班级. 模型 package com.zze.bean; import java.util.HashSet; import java.util ...
- #WEB安全基础 : HTTP协议 | 0x5 URI和URL
URI(统一资源标识符)和URL(统一资源定位符)相信大家都知道URL吧,我们看看它们有什么区别 URI 长得就像这样 /images/hackr.jepg URL 长得像这样 http://hack ...
- 笔记-ASP.NET WebApi
本文是针对ASP.NET WepApi 2 的笔记. Web API 可返回的结果: 1.void 2.HttpResponseMessage 3.IHttpActionResult 4.其他类型 返 ...
- Python 进程之间共享数据
最近遇到多进程共享数据的问题,到网上查了有几篇博客写的蛮好的,记录下来方便以后查看. 一.Python multiprocessing 跨进程对象共享 在mp库当中,跨进程对象共享有三种方式,第一种 ...
- 2440 裸机学习 点亮LED
1.首先需要知道 led 是受哪一个gpio口控制 从上图可以看出,两个led灯是受GPF4 GPF5控制的,低电平有效. 2.怎么控制GPF4 GPF5 通过2440的芯片手册可以看出,需要设置GP ...
- ubuntu安装git
安装git,输入sudo apt-get install git 这是unbutu安装东西的简单命令啊 apt-get
- 使用hector-slam和Kinect V1建图
一.建图实际操作 下载源码测试源码,depthimage_to_laserscan,参考https://blog.csdn.net/u010925447/article/details/5649468 ...
- oracle(3)
存储过程: CREATE OR REPLACE PROCEDURE PROC_ABC ( currency IN NUMBER, aysdate IN DATE, money OUT number ) ...
- 来自docker的嚎叫
好吧, 这是我第二次玩这个玩意了, 其实我现在这家公司是没有接触到docker的, 因此对它也是半桶水的状态, 之前有朋友叫我写过shell去离线部署它, 部署都那样不值一提, 后来到我第二次去接触它 ...