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

// 获取文本域元素const textArea = document.getElementById('id-of-your-textarea');// 获取所有列表项元素（通过父元素获取其所有子元素）const boxLi = document.getElementById('box').children;

// 遍历所有列表项for (let i = 0; i  {    // 当列表项被点击时，执行此回调函数    // 将当前列表项的文本内容追加到文本域的value属性中    // 并添加一个换行符，使每次追加的内容独立成行    textArea.value += boxLi[i].textContent + 'n';  });}

                        body { font-family: Arial, sans-serif; margin: 20px; }        h2 { color: #333; }        ul { list-style: none; padding: 0; border: 1px solid #eee; width: 250px; border-radius: 4px; }        li { padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #eee; transition: background-color 0.2s ease; }        li:last-child { border-bottom: none; }        li:hover { background-color: #f0f0f0; }        textarea { margin-top: 20px; width: 450px; max-width: 100%; height: 180px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; }        
点击列表项，内容将追加到下方文本域
    
        
选项一：苹果
        
选项二：香蕉
        
选项三：橙子
        
选项四：葡萄
    
                // 获取文本域元素        const textArea = document.getElementById('id-of-your-textarea');        // 获取所有列表项元素        const boxLi = document.getElementById('box').children;        // 遍历所有列表项，并为每个项添加点击事件监听器        for (let i = 0; i  {                // 将当前列表项的文本内容追加到文本域的value属性中，并添加换行符                textArea.value += boxLi[i].textContent + 'n';            });        }    

// 示例：使用事件委托document.getElementById('box').addEventListener('click', (event) => {    // 检查点击的元素是否是
标签    if (event.target.tagName === 'LI') {        textArea.value += event.target.textContent + 'n';    }});