js循环appendChild与jq循环append方法遇到的问题

最新推荐文章于 2023-05-14 22:22:53 发布
最新推荐文章于 2023-05-14 22:22:53 发布
阅读量1.5k 收藏
点赞数
文章标签： js appendChild jq append 遍历动态增加元素 解决办法方式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38854849/article/details/102541925
版权

js循环appendChild与jq循环append方法遇到的问题

我想循环往div中添加dom

js代码

var doc = $(“<div>测试</div>");
$(".svg-container").each(function() {
    $(this).append(doc);
}

但是只有最后一个div添加了，我试着用for循环写了也是一样。是什么原因呢

append添加到元素的时候，已存在的元素是移动而不是复制，你用了遍历，所以第一次是新增，后面都是移动前面新增的，最后当然就出现了只有最后一项有东西。
解决办法：
1、不要遍历，你用的是jQuery的类选择器，可以直接 ( " . s v g − c o n t a i n e r " ) . a p p e n d ( d o c ) , 它 会 自 动 复 制 多 份 保 存 a p p e n d 进 去 2 、 遍 历 的 时 候 手 动 复 制 一 份 ， (".svg-container").append(doc),它会自动复制多份保存append进去 2、遍历的时候手动复制一份， (".svg−container").append(doc),它会自动复制多份保存append进去2、遍历的时候手动复制一份，(this).append(doc.clone())
3、doc改成字符串

weixin_38854849
关注
JavaScript(JQ)事件委托以及JS闭包小记
lan_学习分享
06-17 1772
一开始看的时候有些晕，可以监听DOM元素的方法太多，主要是写在<script></script>，下面列出来理清楚: JS原生： document.getElementById("menuultest").onmouseover = function(ev){ }； JQ：该段参考自https://codeplayer.vip/p/j7sq1 // jQue...
css+js+jq实训笔记
weixin_42757570的博客
07-02 1396
css+js+jq实训笔记css第一天css第二天css第三天css第四天css第五天css第六天js第一天js第二天js第三天js第四天js第五天js第六天jq第一天jq第二天jq第三天 css第一天 1、平时有空多记单词（很多新单词） 2、用谷歌浏览器调试代码 3、多看看公众号和网站（对面试有很大的帮助，也可以帮助了解前端） 4、爱果果（可以去玩一下） 5、egret白鹭科技（游戏开发） 6、小程序API，要学会读懂文档、手册 7、学习PS 8、提高自己的审美 9、计算机网络、数据结构 考研408 10
for循环appendChild添加子节点显示最后一个
ltd0306的博客
06-04 1571
//举个栗子 var oDiv = document.createElement("div"); oDiv.appendChild(document.createTextNode("I love javascript")); for (var i = 0; i<5;i++){ document.body.appendChild(oDiv) } //分析原因for循环遍历的是同一个对象 //方案一 for (var i = 0; i<5;i++){ var oDiv = document
for循环追加html js_javascript – for循环中的appendChild只添加1个孩子
weixin_34763128的博客
12-31 823
在JavaScript中,我使用HTML表创建一个网格(在Photoshop中看到的网格类型).网格大小将是可变的,即,可由用户改变,因此必须计算每个网格方块的大小并除以可用于获得精确大小网格的像素数.我已经完成了所有这些,但是我在添加必要的表元素以创建网格时遇到了问题.我的代码处于完全正常工作状态,除非我在for循环中使用appendChild()函数,它只会附加一个子节点,而它应该追加到几百个...
解决js中无法多次appendChild的问题
weixin_30765319的博客
03-06 1062
　　在用原生js创建dom标签后，无法多次添加子标签，感觉非常奇怪，于是查看appendChild()的用法。 　　通常添加子标签的方式是这样的： 　　 1 parentElem.appendChild(subElem); 　　但是要注意的是： 在添加前，subElem必须存在，不一定是显示到页面内，但一定要被创建。但是出现问题的根本所在是下一条：如果subElem已经被添加了...
js原生appendChild的bug（已修正之前大家所说的死循环）
专注前端开发
07-01 1888
appendChild 主要是用来追加节点 插入到最后 window.onload = function(){ var ul2 = document.getElementById('ul2'); var oli = document.getElementsByTagName('li'); for(var i=0;i ul2.appendChild(oli[i]); } }
jq循环日期_jQuery常用事件，each循环，引用当前时间
weixin_39895167的博客
01-17 455
1.常用事件click(function(){...}) #点击时触发hover(function(){...}) #鼠标移到时就触发blur(function(){...}) #失去焦点时触发focus(function(){...}) #获得焦点时触发change(function(){...})#值发生发化就触发keyup(function(){...})off() 方法移除用 .on()...
js的String变量的用法，对jquery的append的一种替代方式
lindiwo的博客
05-16 6196
在项目中调用js的append方法的时候，发现浏览器不兼容，火狐可以显示，IE8却没有任何反应。 $("#test1").append(""); $("#test1").append("test"); $("#test1").append(""); 上面的js方法，没有任何问题。所以如果没有显示，要么是浏览器不兼容，要么就是没有正确的引用jquery。 因为我学得太浅，对变量的认识根本就
总结了大部分jQueryAPI替代的方法
08-07
1. **插入/删除元素**：jQuery的`.append()`、`.prepend()`、`.before()`、`.after()`等方法在原生JavaScript中可以通过`appendChild`、`insertBefore`等实现。而`.remove()`则对应`element.remove()`。 2. **动画...
jQuery和Javascript的基础知识与比较
muzihao6的博客
03-14 624
一、BOM：浏览器对象模型（Browser Object Model） ​ BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构； BOM可实现功能： ​ 弹出新的浏览器窗口 ​ 移动、关闭浏览器窗口以及调整窗口的大小 ​ 页面的前进、后退 window对象的常用属性： 属性名称 说 明 history 有关客户访问过的URL的信息 location 有关当前...
Js基本笔记
1071178244的博客
02-14 449
1.JavaScript概述 1.什么是JS 是一种专门运行于JS解释器/引擎中的解释型脚本语言 2.JS发展史 1.1992年CMM(C–),更名为 ScriptEase 2.1995年LiveScript,更名为 JavaScript 3.1996年JScript 4.1997年网景找到了ECMA(欧洲计算机制造商联合会).网景将JS的核心模块交给了ECMA,从此JS的核心更名为 ECMA S...
js限制定时器的循环次数
weixin_44870969的博客
08-26 1221
js限制定时器的循环次数
JavaScript中的appendChild（）方法
热门推荐
每天学习一点点
12-01 8万+
1.appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。 实例一： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt
JS中使用appendChild()插入节点需要注意的事项
qq_39075021的博客
05-18 5533
首先看下面一段代码： <div id="box"> <p>参考的P标签元素</p> </div> <hr> <div id="target"> <p>p text 1</p> <p>p text 2</p> <p>p text 3</p> <p&gt
js append()后的元素失去事件解决方法1
weixin_42298679的博客
05-16 674
简单解决了动态append添加后失去事件的解决方法。
解决前端 js 中使用 append 动态追加元素标签后，事件和css样式异常问题
_修铁路的、的博客
09-18 1万+
场景： 我们在日常开发过程中，不可避免的会在前端 js 中使用 append 动态的追加元素标签，但新追加的元素标签，不会响应追加前添加的事件和 css 样式信息，今天遇到这个问题，查询总结了一下解决办法。 解决办法： 首先，解决下使用 append 动态追加元素后，不会响应原有事件： 根据百度里面大佬帖子可知: append中的节点是在整个文...
js中的循环引用
最新发布
忧郁的蛋的专栏
05-14 2401
WeakMap 是一种特殊的 Map，它的键是弱引用，不会影响到对象的存活状态。计数器方法会带来一些额外的问题，比如循环引用无法被检测到，也就是说，如果存在两个对象互相引用，但是都不再被其他对象引用，那么这两个对象就永远不会被回收。比如，A 对象中有一个指向 B 对象的引用，而 B 对象中又有一个指向 A 对象的引用，这样就形成了一个循环引用。在 JavaScript 中，循环引用问题是一个常见问题，常见的解决方法有使用 WeakMap 和 WeakSet，使用计数器，使用双向链表，避免循环引用等。
JavaScript在数组尾部添加元素
ann4752518的博客
03-07 4297
** JavaScript在数组尾部添加元素 ** 在数组 arr 末尾添加元素 item。结果返回新的数组。 注意：不要直接修改数组 arr!!! /* 1.使用for循环和push方法 */ function append(arr, item) { const res = [] for(let i=0;i<arr.length;i++) { res.push(arr[i]) } res.push(item) return res; } /* 2.使用concat合并 */ function app
js中使用append()方法，避免出现重复追加的方法
卫可冬的博客
12-23 4万+
场景： 触发点击按钮事件后，开始用append()加载列表，并且显示列表。如图1： 问题： 多次点击按钮出现重复列表的情况。 解决办法： 在点击事件加载列表之前，先使用empty()方法移除元素的的所有子节点和内容 。 示例代码： $("#add").click(function () { $("#list_id").empty(); for(let i of array...
JavaScript Body对象与appendChild方法实例解析
此外，文章提到了JavaScript错误调试，推荐使用Firefox的Firebug插件或IE中的错误提示机制来定位和解决代码问题。JavaScript的基本语法部分，强调了标识符的规则，即标识符可以由字母、数字和下划线组成，且区分大小...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值