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函数</ ...
随机推荐
- 安装和使用ZFS
一.安装和使用ZFS Centos7上安装和使用ZFS:https://blog.csdn.net/linuxnews/article/details/51286358
- vscode/webstorm快捷键
ctrl+/ 单行 [alt+shift+A] 多行注释 (默认的 我已经修改了) 复制当前行:shift + alt +up/down(上下箭头)可以修改成ctrl+d(改成webstorm一 ...
- XML DOM 节点类型（Node Types）
节点类型 下面的表格列出了不同的 W3C 节点类型,以及它们可拥有的子元素: 节点类型 描述 子元素 Document 表示整个文档(DOM 树的根节点) Element (max. one) Pro ...
- https学习笔记二----基础密码学知识和python pycrypto库的介绍使用
在更详细的学习HTTPS之前,我也觉得很有必要学习下HTTPS经常用到的加密编码技术的背景知识.密码学是对报文进行编解码的机制和技巧.可以用来加密数据,比如数据加密常用的AES/ECB/PKCS5Pa ...
- CFRunLoop 源码学习笔记(CF-1151.16)
1.CFRunLoopModeRef 什么时候创建的? 在调用__CFRunLoopFindMode(rl, modeName, create) 1.1)首先通过modeName 在RunLoop 中 ...
- Python之模块导入
import sys #import module (.py)import functools #名词空间 functoolsprint(functools) print("-------- ...
- UUID简介
UUID简介如下:1.简介UUID含义是通用唯一识别码 (Universally Unique Identifier),这 是一个软件建构的标准,也是被开源软件基金会 (Open Software F ...
- iperf使用指南
注意:iperf板上版本和PC上版本要一致,至少都要是2或者3,不能一个是2,一个是3. You also get a "connection refused" error whe ...
- 生成id
package com.develop.web.util; import java.security.MessageDigest; import java.text.SimpleDateFormat; ...
- Netbeans and Remote Host for C/C++ Developing
Netbeans and Remote Host for C/C++ Developing 很久以来,因为我不适应在 Linux 下使用 Vim, GCC, GDB 开发 C/C++ 程序,所以我一直 ...