js循环添加子元素

// 假设有一个ul元素，id为'myList'
const ul = document.getElementById('myList');

// 假设我们有一个数组，包含要添加到ul中的项
const items = ['Item 1', 'Item 2', 'Item 3'];

// 使用for循环遍历数组并创建li元素
for (let i = 0; i < items.length; i++) {
    const li = document.createElement('li'); // 创建li元素
    li.textContent = items[i]; // 设置li的文本内容
    ul.appendChild(li); // 将li添加到ul中
}

// 使用DocumentFragment批量添加元素
const fragment = document.createDocumentFragment();
items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    fragment.appendChild(li);
});
ul.appendChild(fragment);

// 或者使用innerHTML一次性设置
const listItems = items.map(item => `<li>${item}</li>`).join('');
ul.innerHTML += listItems;

// 事件委托示例
ul.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Clicked on:', event.target.textContent);
    }
});