关于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/目录下的文 ...
随机推荐
- linux device drivers ch03
ch03.字符设备驱动程序 编写驱动程序的第一步就是定义驱动程序为用户程序提供的能力(机制).接下来以scull(“Simple Character Utility for Loading Local ...
- Chart控件,鼠标选择区域,可以局部放大缩小
例子: 代码设置部分: chartArea1.CursorX.Interval = 0D; chartArea1.CursorX.IntervalOffsetType = System.Windows ...
- 30K iOS程序员的简述:如何快速进阶成为高级开发人员
前言: 本篇文章适用于所有在这个行业已经有了几年时间后想要在职业生涯中取得突破的开发人员,编程人员和程序员(或者你可能刚刚开始,但希望你能看到你的路径) 本文适合那些有着简单愿望的人:你想成为一名高级 ...
- thinkphp5: 循环输出表格,并固定表格单元宽度(过长省略号)
html: <table class="table table-striped" style='table-layout:fixed;'> <thead clas ...
- Mac新手入门使用教程 - Finder 技巧
1,了解MAC电脑桌面. Finder:中间DOCK栏下最左边蓝白相间的图标. DOCK栏:包括Finder.前往应用程序.创建所有应用程序的快捷方式(google浏览器等).系统偏好设置.堆栈. ...
- CentOS7设置ssh服务以及端口修改
很多时候我们都是通过SSH 服务 来对 Linux 进行操作,而不是直接来操作Linux机器,包括对Linux服务器的操作,因此,设置SSH服务对于学习Linux来说属于必备技能(尤其是运维人员),关 ...
- 爬虫框架Scrapy 之(二) --- scrapy文件
框架简介 核心部分: 引擎.下载器.调度器 自定义部分: spider(自己建的爬虫文件).管道(pipelines.py) 目录结构 firstSpider firstSpider spiders ...
- 五十五、linux 编程——TCP 连接和关闭过程及服务器的并发处理
55.1 TCP 连接和关闭过程 55.1.1 介绍 建立连接的过程就是三次握手的过程:客户端发送 SYN 报文给服务器,服务器回复 SYN+ACK 报文,客户机再发送 ACK 报文. 关闭连接的过程 ...
- Laravel框架中打印sql
在使用Laravel框架的时候,调试的时候,需要将查询的SQL输出校验,这是需要将SQL打印出来. 一.方法 DB::connection()->enableQueryLog(); // 开 ...
- 了解vue里的Runtime Only和Runtime+Compiler
转自:了解vue里的Runtime Only和Runtime+Compiler 扩展文章:Vue 2.0如何仅使用Runtime-only Build构建项目? 可以看到有两种版本: Runtime ...