Question

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

Answer 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);
    });
});

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

1 个答案: