jQuery - 添加元素

张

张建站

2026/4/20 2:43:54

10分钟阅读

jQuery - 添加元素学习笔记jQuery 提供了多种灵活的方法来动态创建和插入 HTML 元素。这些方法可以分为两大类向目标元素内部插入和在目标元素外部插入。一、向目标元素内部插入 (Inside)这些方法将新内容插入到选定元素内部的指定位置。1..append()- 插入到末尾将内容插入到每个匹配元素的内部末尾。// 语法$(selector).append(content);$(selector).append(function(index,html));// 示例$(#list).append(li新项 (末尾)/li);// 插入多个元素$(#list).append(li项 A/li,li项 B/li);// 插入 jQuery 对象var$newItem$(li动态项/li);$(#list).append($newItem);// 使用函数$(#list).append(function(i,html){returnli索引i/li;});2..prepend()- 插入到开头将内容插入到每个匹配元素的内部开头。// 语法$(selector).prepend(content);// 示例$(#list).prepend(li新项 (开头)/li);// 链式操作$(#header).prepend(spanLogo/span).css(background,blue);3..appendTo()- 反向操作将内容添加到目标元素的末尾。与.append()的区别在于调用者和参数互换。// 语法$(content).appendTo(selector);// 示例// 将 #newItem 移动到 #list 的末尾$(#newItem).appendTo(#list);// 创建并添加$(li新项/li).appendTo(#list);4..prependTo()- 反向操作将内容添加到目标元素的开头。// 语法$(content).prependTo(selector);// 示例$(li置顶项/li).prependTo(#list);二、在目标元素外部插入 (Outside)这些方法将新内容插入到选定元素的外部前面或后面。1..after()- 插入到后面在每个匹配元素的外部后面插入内容。// 语法$(selector).after(content);// 示例$(p).after(div段落后的 div/div);// 插入多个$(p).after(span1/span,span2/span);2..before()- 插入到前面在每个匹配元素的外部前面插入内容。// 语法$(selector).before(content);// 示例$(p).before(div段落前的 div/div);3..insertAfter()- 反向操作将内容插入到目标元素的外部后面。// 语法$(content).insertAfter(selector);// 示例$(div新块/div).insertAfter(p);// 在所有 p 后面插入4..insertBefore()- 反向操作将内容插入到目标元素的外部前面。// 语法$(content).insertBefore(selector);// 示例$(div新块/div).insertBefore(p);// 在所有 p 前面插入三、方法对比总结方法插入位置调用者参数记忆口诀.append()内部末尾目标元素新内容目标追加.prepend()内部开头目标元素新内容目标前置.appendTo()内部末尾新内容目标元素新内容放入目标.prependTo()内部开头新内容目标元素新内容放入目标开头.after()外部后面目标元素新内容目标后面.before()外部前面目标元素新内容目标前面.insertAfter()外部后面新内容目标元素新内容插入目标后.insertBefore()外部前面新内容目标元素新内容插入目标前核心区别Inside (内部):.append(),.prepend(),.appendTo(),.prependTo()Outside (外部):.after(),.before(),.insertAfter(),.insertBefore()调用顺序:A.append(B)等价于B.appendTo(A)四、创建元素的方式在插入之前通常需要先创建元素。jQuery 提供了便捷的创建方式1. 创建单个元素// 创建 li 并设置内容var$li$(li新列表项/li);// 创建并设置属性/样式var$div$(div).addClass(box).css(color,red).text(内容);// 创建带属性的元素对象形式var$input$(input,{type:text,id:newInput,class:form-control,placeholder:请输入...});2. 创建多个元素// 直接插入 HTML 字符串jQuery 会解析$(#list).append(li1/lili2/lili3/li);// 或者先创建再插入var$items$(li1/lili2/lili3/li);$(#list).append($items);五、实际应用案例1. 动态添加列表项// 点击按钮添加新项$(#addBtn).click(function(){varval$(#inputVal).val();if(val){// 创建新项var$newItem$(li).text(val).append(button classdel-btn删除/button);// 添加到列表末尾$(#itemList).append($newItem);// 清空输入$(#inputVal).val();}});2. 表格动态行// 添加表格行functionaddTableRow(data){var$row$(tr);$row.append(tddata.id/td);$row.append(tddata.name/td);$row.append(tddata.price/td);// 添加到表格末尾$(#dataTable tbody).append($row);}3. 错误提示插入// 在输入框后面插入错误提示functionshowInputError($input,msg){// 如果已存在错误提示先移除$input.next(.error-msg).remove();// 插入新提示$input.after(span classerror-msgmsg/span);}4. 导航菜单动态生成// 根据数据生成菜单varmenuData[{text:首页,url:/},{text:关于,url:/about},{text:联系,url:/contact}];var$nav$(ul).addClass(nav);$.each(menuData,function(i,item){var$li$(li).append($(a).attr(href,item.url).text(item.text));$nav.append($li);});// 插入到导航容器$(#navbar).prepend($nav);5. 图片画廊懒加载// 滚动到底部时加载更多图片$(window).scroll(function(){if($(window).scrollTop()$(window).height()$(document).height()){// 模拟加载数据for(vari0;i3;i){var$img$(img).attr(src,image-(images.lengthi).jpg).addClass(gallery-item);// 添加到画廊末尾$(#gallery).append($img);}}});六、注意事项1. 移动 vs 复制如果插入的是已存在的 DOM 元素jQuery 对象jQuery 会将其移动到新位置而不是复制。如果需要复制请使用.clone()方法。// 移动原位置元素消失$(#old).appendTo(#new);// 复制原位置元素保留$(#old).clone().appendTo(#new);2. 事件绑定如果插入的元素包含事件处理程序在创建时绑定事件会正常工作。如果事件是绑定在父元素上的事件委托新元素也会自动响应。如果事件是直接绑定在元素上的且插入的是字符串 HTML新元素不会自动绑定事件。// ❌ 错误字符串插入后click 事件不会自动绑定$(#list).append(li classitem新项/li);$(.item).click(function(){...});// 对新项无效// ✅ 正确 1使用 jQuery 对象创建并绑定var$li$(li).addClass(item).text(新项);$li.click(function(){...});$(#list).append($li);// ✅ 正确 2使用事件委托推荐$(#list).on(click,.item,function(){...});$(#list).append(li classitem新项/li);// 新项也能触发3. 性能优化批量插入先构建好 DOM 结构一次性插入比循环多次插入性能更好。使用文档片段DocumentFragmentjQuery 内部已优化但手动构建大量元素时也可考虑。// ✅ 推荐批量构建后一次性插入var$fragment$(div);for(vari0;i100;i){$fragment.append(li项 i/li);}$(#list).append($fragment.html());// 或者直接用 $fragment.children()// ❌ 不推荐循环中多次操作 DOMfor(vari0;i100;i){$(#list).append(li项 i/li);// 每次都会触发重排}4. 链式调用所有添加方法都支持链式调用方便连续操作。$(#container).append(div classbox内容/div).find(.box).css(background,blue).fadeIn();总结jQuery 的元素添加方法非常灵活内部插入:.append(),.prepend(),.appendTo(),.prependTo()外部插入:.after(),.before(),.insertAfter(),.insertBefore()创建元素: 使用$(tag)语法可链式设置属性和内容移动 vs 复制: 默认移动需复制时用.clone()事件处理: 优先使用事件委托.on()处理动态元素掌握这些方法可以轻松实现动态列表、表单、表格等交互功能

Windows操作系统，如何设置开启自动启动指定的程序？

winrcmd输入 shell:startup进入路径：C:\Users\16904\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup空白处右键，新建快捷方式，点击浏览，选择需要开机自启的【应用程序启动文件】...

2026/4/20 2:39:17 阅读更多 →

VibeVoice Pro流式语音效果展示：超长文本10分钟连续输出无卡顿实录

VibeVoice Pro流式语音效果展示：超长文本10分钟连续输出无卡顿实录 1. 引言：重新定义实时语音生成的边界当你需要将大段文字转换成语音时，最头疼的是什么？是漫长的等待时间，还是听到一半突然卡顿的尴尬？…...

2026/4/20 2:37:26 阅读更多 →

你的百度网盘下载为什么这么慢？秘密武器在这里！

你的百度网盘下载为什么这么慢？秘密武器在这里！ 【免费下载链接】baidu-wangpan-parse 获取百度网盘分享文件的下载地址项目地址: https://gitcode.com/gh_mirrors/ba/baidu-wangpan-parse 你是否曾经面对百度网盘的下载界面，看着那缓…...

2026/4/20 2:35:28 阅读更多 →

背靠背VSC直流母线电压控制与同步发电机并网发散问题：原理、分析与解决方案

背靠背VSC直流母线电压控制与同步发电机并网发散问题：原理、分析与解决方案摘要背靠背电压源换流器（Back-to-Back VSC）是现代柔性直流输电和新能源并网系统的核心设备。在实际工程调试中，经常出现一个令人困扰的现象：当采用“三相电源-VSC-直流母线-VSC-三相电源”的背…...

2026/4/20 3:02:06 阅读更多 →

5分钟搞定抖音素材批量下载：douyin-downloader让你的创作效率翻倍

5分钟搞定抖音素材批量下载：douyin-downloader让你的创作效率翻倍【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fal…...

2026/4/19 0:08:06 阅读更多 →