首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么jQuery.append(new Array(3).fill($('<div>',{text:‘hello’}))只追加一项?

jQuery.append() 方法用于在选定元素的末尾插入指定内容。在给定的代码中,jQuery.append() 方法的参数是一个数组,数组中包含了一个填充了三个 <div> 元素的 jQuery 对象。

然而,由于在填充数组时使用了 new Array(3).fill() 方法,这会导致数组中的三个 <div> 元素实际上是同一个元素的引用。因此,当调用 jQuery.append() 方法时,只有一个 <div> 元素会被追加到选定元素的末尾。

要解决这个问题,可以使用 jQuery.each() 方法来遍历数组,并为每个元素创建一个新的 jQuery 对象,然后再将它们追加到选定元素中。修改后的代码如下:

代码语言:javascript
复制
var divArray = new Array(3).fill($('<div>', {text: 'hello'}));
$.each(divArray, function(index, element) {
  $('body').append($(element));
});

这样,就能够正确地将三个 <div> 元素追加到选定元素的末尾了。

关于 jQuery.append() 方法的更多信息,您可以参考腾讯云的相关文档:jQuery.append() 方法 - 腾讯云

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jquery 操作 select

jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#select_id").val(); //获取Select选择的Value 4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值 jQuery获取Select元素,并设置的 Text和Value: 实例分析: 1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中 2. $("#select_id ").val(4); // 设置Select的Value值为4的项选中 3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中 jQuery添加/删除Select元素的Option项: 实例分析: 1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项) 2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置) 3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个) 4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个) 5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option 6. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option 三级分类 <select name="thirdLevel" id="thirdLevel" onchange="getFourthLevel()"> <option value="0" id="thirdOption"> 请选择三级分类 </option> </select>

四级分类: <select name="fourthLevelId" id="fourthLevelId"> <option value="0" id="fourthOption"> 请选择四级分类 </option> </select>
.if($("#thirdLevel").val()!=0){ $("#thirdLevel option[value!=0]").remove(); } if($("#fourthLevelId").val()!=0){ $("#fourthLevelId option[value!=0]").remove(); }//这个表示:假如我们希望当选择选择第三类时:如果第四类中有数据则删除,如果没有数据第四类的商品中的为默认值。在后面学习了AJAX技术后经常会使用到!

02

Vue实现简单todoList以及jquery实现对比

上一篇文章,了解了Vue的hello world程序;这次简单了解两个vue指令,v-for和v-model,来实现一个简单的todolist;

03
  • python测试开发django-166.jQuery 使用append()动态添加div元素

    在页面上动态添加div元素,比如用户在添加多个银行卡的时候,可以动态添加和删除div元素

    01

    Jquery 常见案例

    版权声明:本文为博主原创文章,未经博主允许不得转载。

    01

    大型项目技术栈第七讲 Chosen的使用

    Chosen是jquery下的一个下拉框插件。它能美化select选择框使其他变的更好看、更方便,同时它更扩展筛选的功能。它可对列表进行分组,同时也可禁用某些选择项。chosen插件使用起来很容易。有单选和多选,而且能监听事件及渲染。

    04

    DMO节点内部插入的常用方法与区别

    动态创建的元素是不够的,它只是临时存放在内存中,最终我们需要放到页面文档并呈现出来。那么问题来了,怎么放到文档上?

    00

    与Ajax同样重要的jQuery(2)

    练习9: ² 点击button 打印radio checkbox select 中选中项的值 <script type="text/javascript" src="../jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function(){ // 点击button 打印radio checkbox select 中选中项的值 $("#mybutton").click(function(){ // 打印选中性别的值 $("in

    05

    前台JS(Jquery)调用后台方法 无刷新级联菜单示例

    前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 CasMenu.aspx页面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio

    05

    jquery操作select(取值,设置选中)

    jquery操作select(取值,设置选中) 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的 3. var checkValue=$("#select_id").val(); //获取Select选择的Value 4. var check

    02

    JavaScript 前端笔记总结(精简)

    JavaScript 一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型,属于网络的脚本语言,现在已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果,现在随着node.js引擎的出现,使得JavaScript逐步成为了一种全栈开发语言了.

    01

    「数据可视化库王者」D3.js 极速上手到Vue应用

    D3近年来一直是 JavaScript最重要的数据可视化库之一,在创建者 MikeBostock的维护下,前景依然无量,至少现在没有能打的:

    01

    「数据可视化库王者」D3.js 极速上手到Vue应用

    D3近年来一直是 JavaScript最重要的数据可视化库之一,在创建者 MikeBostock的维护下,前景依然无量,至少现在没有能打的:

    03

    jquery获得option的值和对option进行操作

    清空 Select: $("#ddlRegType ").empty();  jquery获得值: val()  text()  设置值  val('在这里设置值')

    01

    JavaScript 学习-37.jQuery 添加/删除/替换元素

    前言 通过 jQuery,可以很容易地添加和删除元素。 添加元素 添加元素主要用到四个方法 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 append() 方法在被选元素的结尾插入内容(作为该元素子元素插入)

    [Java面试九]脚本语言知识总结.

    核心内容概述 1.JavaScript加强,涉及到ECMAScript语法、BOM对象、DOM对象以及事件。 2.Ajax传统编程。 3.jQuery框架,九种选择器为核心学习内容 4.JQuery UI插件 5.jQuery Ajax编程 6.jQuery第三方插件 7.反向Ajax编程(彗星) 一、JavaScript基础加强 JavaScript是在浏览器内容运行,无需编译、解释执行动态脚本语言,是一种弱类型语言,所有变量使用var定义。 JavaScript的3个组成部分分别为:核心(ECMAScr

    013

    jquery 圆形进度条

    最近手里面的项目需要完成这个对设备性能的检测显示功能,需要使用到圆形进度条这样的效果,网上找了一圈,有很多相当的插件,找到:circliful 插件,看了他的使用说明比较的方便,于是就下载了它并将自己想要的效果添加了进去;

    00

    jq---方法总结

    1. 什么是jQuery 在使用jQuery之前,我们必须先了解什么是jQuery,它能够干什么(不然我们为啥要用它)。 jQuery是一个非常流行的快速、小巧、功能强大的开源JavaScript库。就像官方所宣称的那样——"Write less,do more",它使得我们常用的HTML文档遍历、DOM操作、事件处理、动画效果、Ajax、工具方法等功能代码的实现变得非常简单。更重要的是,它还为我们做了跨浏览器的兼容。绝大多数时候,妈妈再也不用担心我的JS兼容问题了(由于浏览器bug等因素,jQuery也无

    02

    jquery操作select的几种情况

    jquery操作select分为获取option的值、删除option、增加option、获取option的长度、清空select、判断select框中是否存在某个值。

    02

    JQuery最全常用方法指南

    ready(fn); $(document).ready()注意在body中没有onload事件,否则该函数不能执行。在每个页面中可以 有很多个函数被加载执行,按照fn的顺序来执行。 bind(type, [data], fn) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。可能的事件属性有:blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error one(type, [data], fn) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。在每个对 象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。

    03

    jQuery笔试题汇总整理--2018

    1、最大的一点是页面无刷新,用户的体验非常好。 2、使用异步方式与服务器通信,具有更加迅速的响应能力。 3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。 4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。 ajax的缺点 1、ajax不支持浏览器back按钮。 2、安全问题 AJAX暴露了与服务器交互的细节。 3、对搜索引擎的支持比较弱。 4、破坏了程序的异常机制。 5、不容易调试。

    02

    jQuery操作Select

    jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text 3. var checkValue=$("#select_id").val();  //获取Select选择的Valu

    07

    shape文件上传与展示

    概述 本文讲述如何在OL中结合GeoTools实现shp数据的上传与展示。 流程 实现效果 使用技术 jquery插件uploadify和ServletFileUpload实现shp文件的上传; Zi

    02

    04-老马jQuery教程-DOM节点操作及位置和大小

    1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签。创建标签后,动态的给他添加属性。例如代码: // 动

    09

    第117天:Ajax实现省市区三级联动

    (3)封装回调函数,回调函数success中用$.each循环每一条数据,动态创建option,并将数据添加到option中

    01

    jQuery的使用

    1.需求分析 在首页中(logo的上方)显示一个广告图片(页面加载后,间隔3秒弹出广告图片,再间隔3秒后隐藏广告图片)。【使用jQuery实现】

    03

    【D3使用教程】(2) 绘制柱状图与散点图

    这里,通过attr()给每个div添加bar类。使用style()修改每个div的高度。

    02

    jQuery 元素操作

    jQuery 元素操作主要讲的是用jQuery方法,操作标签的遍历、创建、添加、删除等操作。

    03

    04-老马jQuery教程-DOM节点操作及位置和大小

    根据给定的文章内容,撰写摘要总结。

    00

    简单的文本框输入自动提示

    简单的文本框输入自动提示--输入的时候可以直接异步加载数据库中匹配的项,然后显示出来。

    01

    jQuery动态添加/删除元素及内容

    添加新的 HTML 内容,四种方法:可根据上面的图片来区分四种方法插入元素的位置。

    01

    什么是jQuery?

    Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作

    07

    Web前端JQuery面试题(一)

    匹配包含给定文本的元素 匹配所有不包含子元素或者文本的空元素 匹配含有选择器所匹配的元素的元素 匹配含有子元素或者文本的元素

    02

    JQuery-命令速查-CheatSheet

    http://stackoverflow.com/questions/31379409/form-submission-causing-maximum-call-stack-size-exceeded

    03

    jQuery 元素操作

    ​ jQuery 元素操作主要讲的是用jQuery方法,操作标签的遍历、创建、添加、删除等操作。

    01

    OpenLayers3基础教程——OL3 介绍interaction

    本节主要讲述OL3的交互操作interaction,重点介绍draw,select以及modify。

    04

    【领会要领】web前端-轻量级框架应用(jQuery基础)

    jquery的安装和语法,jquery的多种选择器,dom操作和jquery事件。

    02

    jquery操作select(取值,设置选中)

    最近工作中总出现select 和 option问题,整理一下,内容大部分源于网络资料

    03

    Asp.Net无刷新分页( jquery.pagination.js)

    采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 友情提示:本示例Handler中采用StringBuilder的append方法追加HTML,小数据量可以,但是大数据或是布局常变,建议返回JSON格式的数据,性能和灵活性更好! 1.插件参数列表 image.png 2.页面内容: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default

    09

    一文玩转jQuery+Ajax

    简介:jQuery 是一个轻量级的"写的少,做的多"的 JavaScript 库。

    02

    jquery的checkbox,radio,select等方法总结

    jquery的checkbox,radio,和select是jquery操作的一个难点和重点,很多前端新手对其了解不是很透彻。时间久了不用,我在写的时候有时也难免对某些操作支支吾吾,记不清楚,现在,对其做一些简单的总结!

    02

    day40_jQuery学习笔记_01

    day01: jQuery基础 --> 选择器、属性和CSS、文档处理 day02: jQuery高级 --> 筛选、事件、效果(动画)、ajax

    02

    Juqery就是这么简单

    什么是Jquery? Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作 就是封装了JavaScript,能够简化我们写代码的一个JavaScript库 为什么要使用Jquery? 我觉得非常重要的理由就是:它能够兼容市面上主流的浏览器,我们学习AJAX就知道了,IE和FireFox获取异步对象的方式是不一样的,而Jquery能够屏蔽掉这些不兼容的东西… (1)写少代码,做多事情【write less do more】 (2)免费,开源且轻量级的js库,容量很小

    05

    JavaWeb(八)JQuery

    jQuery 市场用得比较多两个框架: jQuery 比较适合做一些互联网 的应用(12306.com,蘑菇街,美丽说,聚美) extjs 比较适合做后台管理系统(电商(订单管理),银行,电信) 核心: 主要功能:javascript开发人员查找元素、操作DOM、处理事件、执行动画和开发Ajax的操作。优势:(宗旨:write less ,do more 写更少的代码,做更多的事情) 1:轻量级 (js 库非常小) 2:强大的选择器(获取页面上面的dom 元素 document.getElementByI

    04

    【D3使用教程】(6) 交互操作之事件监听

    在之前的文章中写到,为了让图表具有交互能力,我们必须针对一些事件来编写代码,以便监听某些DOM元素发生的这些事件。

    01

    jQery基础操作

    remove():删除整个节点 empty():清空节点内容 detach():删除整个节点,保留元素的绑定事件、附加的数据

    01

    Web前端开发JQuery框架笔记

    ID选择器: 通过使用简单的$(#id)标识前缀,实现快速匹配指定ID的元素对象,具体用法如下.

    02

    jQuery 元素操作

    jQuery 元素操作主要讲的是用jQuery方法,操作标签的遍历、创建、添加、删除等操作。

    05

    jquery 常用方法总结

    jQuery顶级对象 缩写$    window.jQuery   window.$

    00

    jquery操作select(取值,设置选中)

    本文由 小马哥 创作,采用 知识共享署名4.0 国际许可协议进行许可 本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名

    03

    学习jQuery设计思想有感

    马上就快到2022年了,jQuery已然过时,那我们新人是否还有学习jQuery的必要呢?

    03

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券