当前位置：首页 > 文章列表 > 文章 > 前端 > 纯JS实现列表点击添加到文本框

纯JS实现列表点击添加到文本框

2025-11-15 21:07:28 0浏览收藏

本文详细介绍了如何使用纯JavaScript实现点击列表内容添加到文本框的功能，无需任何外部库。通过原生JavaScript代码示例，展示了如何获取DOM元素，遍历列表项，并为每个列表项添加点击事件监听器，实现将点击的列表项文本内容动态追加到文本区域（textarea）的功能。采用纯JavaScript不仅有助于理解DOM操作的核心机制，还能提供更优的性能和更小的代码体积。文章还讨论了`textContent`与`innerHTML`的区别，并提出了使用事件委托优化性能的建议，旨在帮助开发者更好地掌握Web前端交互开发的基础技能，构建更高效的Web应用程序。

纯JavaScript实现：点击列表项内容追加至文本区域

本教程详细阐述了如何使用纯JavaScript动态地将HTML列表（`

`）中的文本内容追加到文本区域（`

在上述代码片段中：

- 元素被赋予了 id="id-of-your-textarea"，作为内容的目标区域。</li></ul><h3>JavaScript核心逻辑</h3><p>实现点击列表项追加内容到文本区域的功能，主要涉及以下几个关键的JavaScript步骤：</p><ol><li><strong>获取DOM元素引用：</strong> 使用 document.getElementById() 方法获取列表容器（<ul>）和文本区域（<textarea>）的DOM对象。</li><li><strong>遍历列表项：</strong> 获取列表容器下的所有子元素（即所有的 <li> 标签），并对它们进行迭代处理。</li><li><strong>绑定事件监听器：</strong> 为每个列表项添加一个 click 事件监听器，以便在用户点击时触发相应的操作。</li><li><strong>更新文本区域内容：</strong> 在点击事件被触发时，获取当前被点击列表项的文本内容，并将其追加到文本区域的 value 属性中。</li></ol><p>以下是实现上述逻辑的纯JavaScript代码：</p><pre class="brush:php;toolbar:false">// 获取HTML元素的引用 const textArea = document.getElementById('id-of-your-textarea'); const boxLi = document.getElementById('box').children; // 获取ID为'box'的ul元素下的所有子元素（即所有的li元素） // 遍历所有列表项，并为每个列表项添加点击事件监听器 for (let i = 0; i < boxLi.length; i++) { boxLi[i].addEventListener('click', () => { // 当点击列表项时，将其文本内容追加到文本区域 // `textContent` 用于获取元素的纯文本内容 // `\n` 用于在每次追加时添加一个换行符，使内容更易读 textArea.value += boxLi[i].textContent + '\n'; }); }</pre><h3>代码解析</h3><ul><li>const textArea = document.getElementById('id-of-your-textarea'); 这行代码通过ID id-of-your-textarea 获取到文本区域的DOM对象，并将其存储在名为 textArea 的常量中。</li><li>const boxLi = document.getElementById('box').children; 首先，它通过ID box 获取到 <ul> 元素。接着，.children 属性用于获取该 <ul> 元素的所有直接子元素（即所有的 <li> 元素）。这些子元素会以一个 HTMLCollection 的形式返回，它类似于一个数组，但不是真正的数组。</li><li>for (let i = 0; i < boxLi.length; i++) { ... } 这是一个标准的 for 循环，用于遍历 boxLi 中获取到的每一个 <li> 元素。</li><li>boxLi[i].addEventListener('click', () => { ... }); 在循环内部，对于每一个 <li> 元素，我们都使用 addEventListener 方法为其绑定一个 click 事件监听器。当用户点击该 <li> 元素时，传入的箭头函数（作为回调函数）就会被执行。</li><li>textArea.value += boxLi[i].textContent + '\n'; 这是事件监听器中执行的核心操作：<ul><li>boxLi[i].textContent：用于获取当前被点击的 <li> 元素的纯文本内容。例如，如果 <li> 是 <li>Text1</li>，则 textContent 将返回 "Text1"。</li><li>textArea.value：表示文本区域当前显示的内容。</li><li>+= 运算符：这是一个复合赋值运算符，它将右侧的字符串追加到 textArea.value 的现有内容之后。</li><li>'\n'：在追加的文本后面添加一个换行符。这确保了每次点击列表项时，新添加的内容都会在新的一行显示，提高了文本区域内容的可读性。</li></ul></li></ul><h3>注意事项与最佳实践</h3><ul><li><strong>纯JavaScript的优势：</strong> 使用原生JavaScript实现此类功能，可以避免引入大型库（如jQuery）所带来的额外文件大小和潜在的性能开销。这对于简单功能或对性能有严格要求的场景尤为重要。同时，它能帮助开发者更深入地理解Web浏览器的工作原理和DOM API。</li><li><strong>textContent vs. innerHTML：</strong> 在获取元素内容时，textContent 仅返回元素的纯文本内容，不包含任何HTML标签。而 innerHTML 则会返回包含HTML标签的字符串。在本例中，我们只需要纯文本，因此 textContent 是更安全、更推荐的选择，因为它能有效防止潜在的XSS（跨站脚本攻击）风险。</li><li><strong>事件委托（Event Delegation）：</strong> 对于包含大量列表项的场景，为每个 <li> 元素单独添加事件监听器可能会导致性能问题，尤其是在动态添加或移除列表项时。一种更优化的方法是使用事件委托，即只在父元素（<ul>）上添加一个事件监听器，然后通过事件对象的 event.target 属性判断是哪个子元素触发了事件。虽然本教程的示例代码直接为每个 <li> 添加监听器，但在处理大量动态元素时，事件委托是一个重要的优化技巧。</li><li><strong>代码执行时机：</strong> 确保您的JavaScript代码在DOM元素加载完毕后才执行。通常，您可以将 <script> 标签放置在 <body> 结束标签之前，或者使用 DOMContentLoaded 事件监听器来确保DOM树已完全构建。</li></ul><h3>总结</h3><p>通过本教程的学习，您已经掌握了如何利用纯JavaScript动态地将HTML列表项的内容追加到文本区域。这种方法简洁、高效，并且不依赖任何外部库，是掌握Web前端交互开发的基础技能之一。理解和运用原生JavaScript进行DOM操作，将为您构建更复杂、更高效、更健壮的Web应用程序打下坚实的基础。</p><p>本篇关于《纯JS实现列表点击添加到文本框》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！</p>

PHP递归遍历多维数组方法详解

PHP递归遍历多维数组方法详解

上一篇: PHP递归遍历多维数组方法详解

Golang微服务监控设计与Prometheus实践

下一篇: Golang微服务监控设计与Prometheus实践

查看更多

最新文章

文章 · 前端 | 14小时前 | 定时器 · 前端 · 性能排查 · 接口请求 · 轮询 · setInterval · setInterval 页面可见性 clearInterval 前端轮询请求堆积定时器清理

前端轮询接口越打越多怎么办：从重复定时器到清理机制一步步排查

490浏览收藏
文章 · 前端 | 16小时前 | 前端 · 状态管理 · 表单提交 · 防重复提交 · 接口幂等 · 重复提交前端表单请求去重按钮锁定幂等key

前端表单重复提交治理完整流程：按钮锁定、请求去重和幂等 key

253浏览收藏
文章 · 前端 | 17小时前 | 前端 · 搜索框 · AbortController · 接口请求 · 状态管理 · Fetch AbortController 前端搜索请求乱序旧响应覆盖

前端搜索结果倒退怎么办：AbortController 取消旧请求和序号兜底

295浏览收藏
文章 · 前端 | 20小时前 | 前端 · 性能优化 · cls · 懒加载 · Core Web Vitals · 前端图片懒加载 IntersectionObserver CLS 布局稳定

前端图片懒加载布局抖动治理完整流程：占位比例、按需加载和 CLS 复查

128浏览收藏
文章 · 前端 | 1天前 | 前端 · 消息队列 · websocket · 实时通信 · 断线重连 · 前端 websocket 心跳检测断线重连消息补发

前端 WebSocket 断线重连完整流程：心跳检测、退避重试和消息补发

365浏览收藏
文章 · 前端 | 1天前 | 工程化 · 前端 · javascript · css · 弹窗 · 前端 z-index 遮罩层 stacking context Portal 弹窗层级

前端弹窗层级治理工作流：从 z-index 混乱到 Portal 容器规范

350浏览收藏
文章 · 前端 | 1天前 | 前端 · javascript · URL参数 · 列表筛选 · 页面状态 · 前端筛选条件列表页 history.replaceState URLSearchParams 刷新还原

前端筛选条件刷新后丢失怎么办：从内存状态到 URL 参数一步步排查

348浏览收藏
文章 · 前端 | 1天前 | 前端 · 性能优化 · 路由 · javascript · 前端用户体验滚动位置路由缓存 scrollRestoration

前端详情页返回列表丢失滚动位置怎么办：从复现到恢复一步步排查

458浏览收藏
文章 · 前端 | 1天前 | 前端 · Cookie · cors · 接口调试 · 登录态 · 问题排查 · 前端 cookie cors Fetch SameSite 登录态接口401

前端登录后接口仍是未登录怎么办：从 Cookie 是否发送一步步排查

124浏览收藏
文章 · 前端 | 3天前 | 前端 · javascript · sourcemap · 错误监控 · 线上排查 · 前端错误监控告警 onerror sourcemap unhandledrejection

前端错误监控实战：onerror、unhandledrejection 和 sourcemap 定位问题

331浏览收藏
文章 · 前端 | 3天前 | 前端 · javascript · 缓存治理 · localStorage · Web性能 · 前端本地缓存 localStorage 过期时间版本迁移异常兜底

前端 localStorage 缓存治理实战：过期时间、版本号和异常兜底

480浏览收藏
文章 · 前端 | 3天前 | 前端 · 性能优化 · javascript · 图片优化 · IntersectionObserver · 前端性能优化图片懒加载 IntersectionObserver Web性能首屏优化

前端图片懒加载实战：用 IntersectionObserver 降低首屏压力

184浏览收藏

查看更多

课程推荐

前端进阶之JavaScript设计模式

设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。

543次学习
GO语言核心编程课程

本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。

516次学习
简单聊聊mysql8与网络通信

如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让

500次学习
JavaScript正则表达式基础与实战

在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。

487次学习
从零制作响应式网站—Grid布局

本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。

485次学习

查看更多

AI推荐

ljg-skills

ljg-skills 是李继刚开源的 AI 技能与提示词集合，面向大模型使用者整理了一批可复用的 prompt、角色设定和任务技能模板，适合用于学习提示词设计、搭建个人 AI 工作流和沉淀团队常用智能体能力。

235次使用
MELO音乐

MELO音乐是一站式AI视频与音乐制作助手，对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐，MELO为你免费谱曲，轻松做同款！

256次使用
UniScribe

UniScribe 是一款 AI 音视频转文字与内容整理工具，支持上传音频、视频文件或粘贴 YouTube 链接，自动生成转写文本、摘要、思维导图和关键问题，并支持多格式导出，适合会议记录、课程学习、访谈整理和内容创作复盘。

227次使用
剧云

剧云是专业中文剧本创作平台，安全稳定运行十余年，集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能，数据安全防护，轻松高效创作剧本。

394次使用
万象有声

万象有声，一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具，可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验，让有声书制作更简单！

389次使用

查看更多

相关文章

JavaScript函数定义及示例详解

2025-05-11 502浏览
优化用户界面体验的秘密武器：CSS开发项目经验大揭秘

2023-11-03 501浏览
使用微信小程序实现图片轮播特效

2023-11-21 501浏览
解析sessionStorage的存储能力与限制

2024-01-11 501浏览
探索冒泡活动对于团队合作的推动力

2024-01-13 501浏览

Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！

技术交流群

Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜苏ICP备2023003363号-1

关注公众号

Golang学习网

微信登录更方便

密码登录
注册账号

登录即同意用户协议和隐私政策

返回登录

重置密码