时间戳

首页 > 解决方案 > 如何选择尚未创建的元素？

javascript - 如何选择尚未创建的元素？

问题描述

这意味着我有一个待办事项列表项目，其中单击一个添加按钮，该按钮创建一个 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 中的加号后，我希望出现一个文本输入表单。任何帮助将不胜感激！

标签： javascript

解决方案

querySelector如果目标元素不存在，Indeed将返回 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);
    });
});

推荐阅读