JavaScript: come aggiungere un messaggio con il metodo "createElement?

😈╰•ALBERTO•╯😈

Non vorrei creare tag inutili per un messaggio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista della spesa</title>
</head>
<body>
    <h1>Lista della spesa</h1>
    <input type="text" id="item" placeholder="Aggiungi un prodotto">
    <button onclick="addItam()">Aggiungi</button>
    <ul id="shoppingList"></ul>
    <button onclick="apply()">Salva</button>
    <script>

        function addItam(){
            var input = document.getElementById("item");
            var item = input.value;

            if(item !==""){

                var shoppingList = document.getElementById("shoppingList");
                var li = document.createElement("li");
                li.textContent=item;
                shoppingList.appendChild(li);
            }

            input.value="";

            
        }

        function apply(){

            var newElement = document.createElement("h2");
            

        }
    </script>
</body>
</html>

L'ultima riga dove devo aggiungere il messaggio è direttamente alla fine ("h2")
@Giulio_M

Giulio_M

😈╰•ALBERTO•╯😈 mah, veramente non userei createElement(), puoi fare tutto con un semplice document.getElementById(), ovvero:

nell'HTML hai un certo elemento (div) con un proprio identificativo: <div id="div1"></div>
nel codice JavaScript invece hai: document.getElementById("div1").innerHTML="<h2>testo</h2>"; vale a dire che puoi anche aggiungere markup HTML direttamente in questo modo, è la strada più rapida e comoda. Per quanto riguarda la personalizzazione dello stile dell'elemento <h2>, lo puoi fare tramite CSS oppure tramite JavaScript (vedi la tua vecchia discussione: JavaScript: è possibile dare più proprietà di stile a query selector?)

Considera comunque che gli elementi caricati dinamicamente (salvo specifica volontà dell'utente, tramite interazione) sono abbastanza pessimi lato User Experience, causano il CLS (Cumulative Layout Shift) quindi problemi di stabilità visuale. In pratica, se devi cliccare si/no e nel frattempo la pagina si carica spostando il layout, sbagli a cliccare e poi bestemmi! Questo è il CLS e Google lo tiene in considerazione fra i fattori di ranking (appartiene infatti ai core web vitals).

Apple Lover - I am Kenough

Ti pagassero quantomeno…

𝙏𝙝𝙚 𝙊𝙣𝙚 𝙁𝙧𝙤𝙢 𝙏𝙝𝙚 𝙑𝙖𝙪𝙡𝙩 ®

Giulio_M Concordo con la tua risposta ma sul fatto che i contenuti caricati dinamicamente specificherei che lo sono in caso di siti normali e blog, essendo per lo più statici, ma se andiamo nell'ambito delle Single Page Application per esempio, tutto il contenuto è caricato dinamicamente (è proprio il concetto che sta alla base di questa tecnologia). Per fortuna i framework moderni adottano strategie per rendere questo funzionamento il meno impattante possibile per l'utente. Ad esempio in Angular, ogni componente ha un metodo denominato ngOnInit() in cui puoi inserire le cose che vuoi che vengano caricate prima che il componente venga mostrato all'utente, mentre un altro metodo si occupa di eseguire altre operazioni dopo che la grafica è stata mostrata all'utente ed è ngAfterViewInit(). Grazie a questi metodi si può migliorare di molto l'esperienza utente, anche in caso di contenuti dinamici 🙂

Giulio_M

𝙏𝙝𝙚 𝙊𝙣𝙚 𝙁𝙧𝙤𝙢 𝙏𝙝𝙚 𝙑𝙖𝙪𝙡𝙩 ® ok, beh certo sì io mi riferivo ad articoli, altre pagine (abbastanza) statiche. Il problema diciamo non sarebbe tanto quello di predisporre uno spazio do dimensione fissata e poi riempirlo in modo dinamico, quanto il creare proprio uno spazio dove non c'era (quindi loading e rendering avvengono dopo), questo causa il CLS ovvero l'instabilità visuale, se viene aggiunto un blocco dove non c'era sposta il layout di tutto il resto. Ben diverso quindi da mantenere fissa la struttura e variare anche dinamicamente il contenuto, stile ecc. Alla fine più che la tecnologia usata, ciò che conta come risultato finale è l'esperienza utente... Se il risultato va bene, appunto va bene 🙂