关于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/目录下的文 ...
随机推荐
- cucumber学习笔记
来源于cucumber官网 学习完了之后全部整理一遍
- 分类器的评价指标-ROC&AUC
ROC 曲线:接收者操作特征曲线(receiver operating characteristic curve),是反映敏感性和特异性连续变量的综合指标,roc 曲线上每个点反映着对同一信号刺激的感 ...
- java与python数据结构对比
- J.U.C-volatile
禁止指令重排
- web服务器软件
web服务器软件 1. 相关信息 接收用户请求,处理请求,作出响应.在web服务器软件中,可以部署web项目,让用户通过浏览器访问这些项目. 常见的Java相关的web服务器软件: webLogic: ...
- Aras 发布Web Services
https://blog.csdn.net/plm888/article/details/10890173
- http升级https的时候,遇到一个问题
问题: Mixed Content: The page at 'https://api.xxxx.com/test' was loaded over HTTPS, but requested an i ...
- vue 点击展开显示更多 点击收起部分隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Hyper-V安装虚拟机
1.进入控制面板-程序,选择“启用或关闭Windows功能” 2.找到Hyper-V,勾选,重启电脑,即可 3.若是没有找到Hyper-V,如此操作 1)新建txt文件,输入以下内容: pushd & ...
- Webpack友好的错误提示插件friendly-errors-webpack-plugin
Friendly-errors-webpack-plugin 介绍 Friendly-errors-webpack-plugin识别某些类别的webpack错误,并清理,聚合和优先级,以提供更好的开发 ...