Execício botão editar | JavaScript: construindo páginas dinâmicas

Olá, segue abaixo o desafio proposto de implementar o botão editar. Tenho uma dúvida, é possivel no createElement() ao invés de colocar ex: "div", "p", colocar a class com o nome? No script.js eu colocar "item-lista-container"( nome class html ) ao invés de "div"?Agradeço a atenção.

scripts.js

const item = document.getElementById("input-item");
const botaoSalvarItem = document.getElementById("adicionar-item");
const listaDeCompras = document.getElementById("lista-de-compras");

botaoSalvarItem.addEventListener("click", adicionarItem);

function adicionarItem(evento) {
    evento.preventDefault()

    const itemDaLista = document.createElement("li");
    const containerItemLista = document.createElement("div");
    containerItemLista.classList.add("item-lista-container");

    const containerNomeDoItem = document.createElement("div");
    const nomeDoItem = document.createElement("p");
    nomeDoItem.innerText = item.value;
    containerNomeDoItem.appendChild(nomeDoItem);

    const containerBotoes = document.createElement("div");
    const botaoDeletar = document.createElement("button");
    const botaoEditar = document.createElement("button");
    
    botaoDeletar.classList.add("botao-acao");
    botaoEditar.classList.add("botao-acao");

    const imagemDeletar = document.createElement("img");
    imagemDeletar.src = "img/delete.svg";
    imagemDeletar.alt = "Deletar";

    botaoDeletar.appendChild(imagemDeletar);
    containerBotoes.appendChild(botaoDeletar);

    const imagemEditar = document.createElement("img");
    imagemEditar.src = "img/edit.svg";
    imagemEditar.alt = "Editar";

    botaoEditar.appendChild(imagemEditar);
    containerBotoes.appendChild(botaoEditar);

    containerItemLista.appendChild(containerNomeDoItem);
    containerItemLista.appendChild(containerBotoes);
    itemDaLista.appendChild(containerItemLista);
    listaDeCompras.appendChild(itemDaLista);

}

index.html

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista de Compras</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&family=Numans&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./styles.css" />
</head>
    
<body>
    <main>
        <img src="img/bag.png" alt="Sacola de compras">
        <form>
            <input id="input-item" type="text" placeholder="Digite o item que deseja adicionar"/>
            <button id="adicionar-item">Salvar item</button>
        </form>
    
        <ul id="lista-de-compras">
            <h2>Lista de Compras</h2>
            <hr />
            <li>
                <div class="item-lista-container">
                    <div class="container-nome-compra">
                        <div class="checkbox-container">
                            <label for="checkbox-1">
                                <input class="checkbox-input" id="checkbox-1" type="checkbox"/>
                                <div class="checkbox-customizado checked"></div>
                            </label>
                        </div>
                        <p>Queijo Minas</p>
                    </div>
                    <div>
                        <button class="botao-acao">
                            <img src="img/delete.svg" alt="Deletar">
                        </button>
                        <button class="botao-acao">
                            <img src="img/edit.svg" alt="Editar">
                        </button>
                    </div>                    
                </div>
                <p class="item-lista-texto">Quarta-feira (19/11/2024) às 15:45</p>
            </li>
        </ul>
    </main>
    <script src="scripts.js"></script>
</body>

</html>

Olá, Douglas, como vai?

Como pode ver aqui na documentação, o método createElement() recebe como argumento apenas dois argumentos. O primeiro é uma string que especifica o tipo do elemento que será criado, e a segunda é nome da tag de um elemento customizado através de outro método (que já é um pouco mais avançado). O recomendado é sempre passar como parâmetro uma tag HTML, já que qualquer string que passar ali será renderizada como uma tag HTML, o que pode confundir leitores de tela e dar outros problemas futuros.

demonstrando o uso indevido do método createElement

Como pode ver acima, é necessário cuidado extra ao usar o método. Pois ele irá renderizar o elemento, mesmo que tenha errado ao digitar. Para adicionar classes ao elementos criados, o classList.add é a melhor escolha!

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Mergulhe em programação