如何选择尚未创建的元素？答案

【问题标题】：How do I select an element that hasn't been created yet?如何选择尚未创建的元素？
【发布时间】：2019-04-26 18:37:13
【问题描述】：

意思是我有一个待办事项列表项目，在该项目中单击一个添加按钮，该按钮创建一个 div 元素，其中包含另一个添加按钮。很容易。现在我想选择那个按钮，以便我可以使用它在新创建的 div 元素中添加一个文本输入表单。

我假设它没有创建的原因是因为当我选择元素时它当时不存在？

const addButton = document.querySelector('.addButton');
const addListItem = document.querySelector('.addListItem');
const todoDiv = document.querySelectorAll('.todoDiv');

addButton.addEventListener('click', () => {
    let div = document.createElement('div');
    div.setAttribute('class', 'todoDiv');
    div.innerHTML = '<a href = "#" class = "addListItem"><i class="fas fa-plus fa-2x"></a>'
    document.body.appendChild(div);
});

addListItem.addEventListener('click', () => {
    let inputBox = document.createElement('input');
    inputBox.setAttribute('type', 'text');
    document.todoDiv.appendChild(inputBox);
});

这也是我的 HTML 以防万一

<body>
    <div class="sideNav">
        <p class = "heading">&lt;/td&gt;</p>
        <a href = "#" class = "addButton sideButton"><i class="fas fa-plus fa-2x"></i></a>
        <a href="#" class = "sideButton"><i class="fas fa-project-diagram fa-2x"></i></a> 
        <a href="#" class = "sideButton"><i class="fas fa-user fa-2x"></i></a>
        <a href="#" class = "sideButton"><i class="fas fa-cog fa-2x"></i></a>
    </div>



    <script src="script.js"></script>
</body>

第一个事件将创建一个带有加号的 div。单击新创建的 div 中的加号后，我希望出现一个文本输入表单。任何帮助将不胜感激！

【问题讨论】：

查找事件委托。这就是 jquery 的工作原理

标签： javascript

【解决方案1】：

如果目标元素尚不存在，querySelector 确实会返回 null。

但在您的情况下，您可以在创建元素后立即添加事件侦听器：

const addButton = document.querySelector('.addButton');

addButton.addEventListener('click', () => {
    let todoDiv = document.createElement('div');
    todoDiv.className = 'todoDiv';
    let addListItem = document.createElement('a'); // Create the anchor like this
    addListItem.className = 'addListItem';
    addListItem.innerHTML = '<i class="fas fa-plus fa-2x"></i>'
    todoDiv.appendChild(addListItem);
    document.body.appendChild(todoDiv);
    // Add event listener now that we have the element:
    addListItem.addEventListener('click', () => { 
        let inputBox = document.createElement('input');
        inputBox.setAttribute('type', 'text');
        todoDiv.appendChild(inputBox);
    });
});

【讨论】：

感谢工作！这是最有效的方法吗？使用事件侦听器定位父元素然后使用 event.target 是更好的方法吗？如果我刚刚学习委托，也很抱歉！
通过事件委托，您确实会有（非常小的）额外开销来识别事件目标及其父在addListItem 事件处理期间。如果您同时实现这两种解决方案，我认为很难找到任何性能差异，因为用户的点击比代码执行本身花费更多的用户时间。