js 动态添加元素 事件

// 假设有一个ul列表，我们希望动态添加li元素，并为每个li绑定点击事件
const ul = document.getElementById('myList');

// 使用事件委托，将点击事件绑定到ul上
ul.addEventListener('click', function(event) {
    if (event.target && event.target.nodeName === 'LI') {
        console.log('Clicked on:', event.target.textContent);
    }
});

// 动态添加li元素
function addListItem(text) {
    const li = document.createElement('li');
    li.textContent = text;
    ul.appendChild(li);
}

// 测试：添加列表项并点击
addListItem('Item 1');
addListItem('Item 2');

function addListItemWithEvent(text) {
    const li = document.createElement('li');
    li.textContent = text;
    
    // 直接为li绑定点击事件
    li.addEventListener('click', function() {
        console.log('Clicked on:', this.textContent);
    });
    
    ul.appendChild(li);
}

// 测试：添加带事件的列表项并点击
addListItemWithEvent('Item 3');