关于jQuery的append方法不能多次添加同一个DOM元素的解决方法
资料来自:https://segmentfault.com/q/1010000007677851?_ea=1419689
append()方法在jQuery中是使用appendChild()实现的,实现原理如下代码:
append: function() {
return this.domManip( arguments, function( elem ) {
if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
var target = manipulationTarget( this, elem );
target.appendChild( elem );
}
});
}
框架中是通过appendChild来操作dom的,appendChild的作用是什么呢?请看w3c解答,它里面也提到可以将元素从一个元素移动到另一个元素,说白了,就是剪切的意思。因此你后面写的不是不起作用,而是在原地移动,因为就一个对象,你再怎么写也是一个。
解决方法:
1、将这个DOM元素写进append()中:
像这样:
$("xxx").append( " <p class='xxx'>·····</p> " );
2、使用克隆方法:
$("xxx").append($("td").clone());
clone()方法甚至可以复制事件处理程序
关于jQuery的clone()方法详情见:http://www.runoob.com/jquery/html-clone.html
关于jQuery的append方法不能多次添加同一个DOM元素的解决方法的更多相关文章
- 关于Cefsharp无法拖动Dom元素的解决方法
如图所显示,Cefsharp在嵌入网页,页面有对Dom元素的拖动的操作,独立在浏览器上对网页元素的拖动是没有问题的,但是嵌入到Cefsharp上显示禁用的图标.排查了H5的代码,没有写入禁用拖动的操作 ...
- JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性
带有Element和不带的区别 a) 带Element的获取的是元素节点 b) 不带可能获取文本节点和属性节点 获取所以子节点 a) . childNodes b) . children ...
- Html开发中document.getElementByTagName无法找到所有DOM元素的问题解决方法
let eleList = document.querySelectorAll('li') for (let i = 0; i < eleList.length; i++) { // 遍历操作 ...
- JabRef中添加中文文献出现乱码 解决方法
JabRef中添加中文文献出现乱码 解决方法 问题描述 JaBRef是一款开源的文献管理软件,主要用来管理bibtex格式的参考文献,可以与LATEX配合使用,方便论文参考文献的使用.文献管理 ...
- add() 方法用于向 <select> 添加一个 <option> 元素。
//add() 方法用于向 <select> 添加一个 <option> 元素. //new Option() 创建一个option标签 school.add(new Opti ...
- JQuery this和$(this)的区别及获取$(this)子元素对象的方法
1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? 首先来看看JQuery中的 $() 这 ...
- jquery无法为动态生成的元素添加点击事件的解决方法
遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...
- 转: JQuery this和$(this)的区别及获取$(this)子元素对象的方法
1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? 首先来看看JQuery中的 $() 这 ...
- jQuery之JSP加载JS文件不起作用的有效解决方法
JSP加载JS文件不起作用的有效解决方法 作者: 字体:[增加 减小] 类型:转载 时间:2014-04-08 jsp导入jquery文件,老是不起作用,原因在于其不能访问/WEB-INF/目录下的文 ...
随机推荐
- Servlet生命周期 和 继承关系
三 servlet的生命周期 (一个servlet类的对象 创建---->销毁) 第一次访问 某个servlet的时候 首先调用其 构造函数 public StudentServlet(){ S ...
- 给centos装图形界面 widowsx
检查Linux系统是否能够联网. 执行命令 yum -y groupinstall Desktop 等上面的命令执行完后,再执行这条命令 yum -y groupinstall "X ...
- [译]Async/Await - Best Practices in Asynchronous Programming
原文 避免async void async void异步方法只有一个目的:使得event handler异步可行,也就是说async void只能用于event handler. async void ...
- macOS Mojave配置OpenGL开发环境
---恢复内容开始--- 前言: 本文写作目的: 是由于本人参考 csdn原文 的方法配置环境时踩了很多坑,所以在此写一篇文防止以后用到. 工具: Xcode CMake 步骤: 准备工作: Xcod ...
- kali linux工具--信息批量收集工具theharvester
在渗透测试早期阶段,安全人员往往需要从互联网快速获取目标的一些信息,以确认测试目标的概况.为了满足这个需求,Kali Linux提供了theharvester工具.该工具可以搜索引擎.社交网站获取目标 ...
- python学习07
函数中的模块及包管理1)1.模块查找的顺序:运行代码时当前目录 -> PYTHONPATH ->系统环境变量PATH设置的路径2.导入模块的书写规范:内置模块-------第三方模块--- ...
- Ubuntu18.04应用程序安装集锦
整理网上的资源: Python Web开发工具箱 ubuntu美化及超NB的zsh配置 api文档查询工具:zeal,dash(收费)
- HDU-1171 Big Event in HDU(生成函数/背包dp)
题意 给出物品种类,物品单价,每种物品的数量,尽可能把其分成价值相等的两部分. 思路 背包的思路显然是用一半总价值当作背包容量. 生成函数则是构造形如$1+x^{w[i]}+x^{2*w[i]}+.. ...
- centos 7.2 下 nginx 1.14.1 安装部署
Nginx1.14.1安装部署 1.环境: 所有源码在跳板机kx的/web/soft下 2.安装依赖: [root@bogon src]# yum install -y libxml2 openssl ...
- 树形结构模型Django-MPTT
什么是django-mptt? django-mptt是一个可复用的django app, 旨在让你自己的django项目模型使用MPTT更加简单.它负责将数据库表作为树型结构管理的详细信息,并提供用 ...