在这个结构中：

立即学习“Java免费学习笔记（深入）”；

ul 元素具有 id=”box”，它包含了一系列 li 列表项。textarea 元素具有 id=”id-of-your-textarea”，这是我们将要追加文本的目标。

JavaScript实现步骤

要实现列表项内容的动态追加，我们需要遵循以下步骤：

获取DOM元素： 使用 document.getElementById() 获取文本区域和列表容器。遍历列表项： 获取列表容器中的所有子元素（即 li 标签）。添加事件监听器： 为每个列表项添加一个点击事件监听器。更新文本区域： 在事件处理函数中，获取被点击列表项的文本内容，并将其追加到文本区域的 value 属性中。

下面是实现上述逻辑的JavaScript代码：

// 获取所需的HTML元素const textArea = document.getElementById('id-of-your-textarea'); const boxLi = document.getElementById('box').children; // 获取所有列表项的HTMLCollection// 遍历所有列表项，为每个项添加点击事件监听器for (let i = 0; i  {    // 当列表项被点击时，将其文本内容追加到文本区域    // `textContent` 用于获取元素的纯文本内容    // `n` 用于在每次追加后添加一个换行符，使内容更易读    textArea.value += boxLi[i].textContent + 'n';  });}

完整示例代码

将HTML结构和JavaScript代码结合起来，您可以创建一个完整可运行的示例：

            body { font-family: Arial, sans-serif; margin: 20px; }    ul { list-style-type: disc; padding-left: 20px; border: 1px solid #eee; padding: 10px; width: fit-content; }    li { cursor: pointer; padding: 5px 0; }    li:hover { background-color: #f0f0f0; }    textarea { margin-top: 20px; border: 1px solid #ccc; padding: 10px; }    
点击列表项，内容追加到文本框
  
    
苹果
    
香蕉
    
橙子
    
葡萄
  
        // 获取所需的HTML元素    const textArea = document.getElementById('id-of-your-textarea');     const boxLi = document.getElementById('box').children; // 获取所有列表项的HTMLCollection    // 遍历所有列表项，为每个项添加点击事件监听器    for (let i = 0; i  {        // 当列表项被点击时，将其文本内容追加到文本区域        textArea.value += boxLi[i].textContent + 'n';      });    }  

代码解析

const textArea = document.getElementById(‘id-of-your-textarea’);通过 document.getElementById() 方法，我们获取了ID为 id-of-your-textarea 的 元素，并将其存储在 textArea 常量中。const boxLi = document.getElementById(‘box’).children;首先获取ID为 box 的 元素。.children 属性返回一个 HTMLCollection，其中包含指定元素的所有子元素（这里就是所有的 元素）。for (let i = 0; i 这是一个标准的 for 循环，用于遍历 boxLi 这个 HTMLCollection 中的每一个列表项。boxLi[i].addEventListener(‘click’, () => { … });addEventListener() 方法用于为指定的元素添加事件监听器。’click’ 是事件类型，表示当元素被点击时触发。() => { … } 是一个箭头函数，作为事件被触发时执行的回调函数。textArea.value += boxLi[i].textContent + ‘n’;boxLi[i].textContent 获取当前被点击的 元素的纯文本内容。例如，如果 是 苹果，则 textContent 将是 “苹果”。textArea.value 用于访问或设置 元素的内容。+= 是复合赋值运算符，它将右侧的值追加到左侧现有值的后面。+ ‘n’ 在每次追加的文本后面添加一个换行符，确保每次点击的列表项内容都在新的一行显示，提高了文本区域的可读性。

注意事项与最佳实践

纯JavaScript的优势： 尽管jQuery等库提供了更简洁的API，但直接使用纯JavaScript可以减少页面加载时间，提高性能，并且有助于您深入理解DOM操作和事件处理机制。对于小型项目或性能敏感的场景，纯JavaScript是更好的选择。DOM加载时机： 确保您的JavaScript代码在DOM完全加载之后执行。通常将 标签放在

以上就是纯JavaScript实现列表项内容动态追加至文本框的详细内容，更多请关注创想鸟其它相关文章！